CODEWITHSUNDEEP
csszurb-foundationfont-awesome
chowwy
chowwy

Reputation: 1126

how to add font icon to accordion - zurb foundation

I'm using Zurb Foundation, working on an accordion. The Zurb accordion comes with a CSS triangle that acts as a toggler, but I want to use two font-awesome icons instead, depending on whether the li has an active class or not. Right now I'm getting a placeholder for the icon image.

Would prefer to do this with CSS only, if possible.

Here's my 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; }

Here's the 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>

Upvotes: 1

Views: 3521

Answers (1)

Dustin
Dustin

Reputation: 1026

The CSS shown does not specify the font-family: FontAwesome;. Try adding that.

Looks like it's not a permission issue but in case others come along I am leaving the links.

For localhost changing permissions on the font itself could help: Icon font (@font-face) not rendering on localhost

Or possible cross domain issues with Firefox: http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default

Upvotes: 2

Related Questions