1

私はZurbFoundationを使用して、アコーディオンに取り組んでいます。Zurbアコーディオンには、トグルとして機能するCSS三角形が付属していますが、liにアクティブなクラスがあるかどうかに応じて、代わりに2つのfont-awesomeアイコンを使用したいと思います。現在、アイコン画像のプレースホルダーを取得しています。

可能であれば、CSSのみでこれを行うことをお勧めします。

これが私のCSSです：

    ul.accordion > li > div.title:after { content:"\f067"; display: block; width: 0; 
height: 0; position: absolute; right: 20px; top: 8px;}

    ul.accordion > li.active .title:after { content:"\f068"; display: block; width: 0; 
height: 0; }

HTMLは次のとおりです。

<ul class="accordion">
  <li class="active">
    <div class="title">
      <h5>Accordion Panel 1</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </li>

 <li>
    <div class="title">
      <h5>Accordion Panel 1</h5>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </li>
</ul>
4

1 に答える 1

2

示されているCSSはを指定していませんfont-family: FontAwesome;。それを追加してみてください。

許可の問題ではないようですが、他の人が来た場合に備えて、リンクを残しています。

ローカルホストの場合、フォント自体の権限を変更すると役立つ場合があります。アイコンフォント（@ font-face）がローカルホストでレンダリングされない

または、Firefoxで発生する可能性のあるクロスドメインの問題：http：//www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default

于 2013-02-02T16:16:32.830 に答える