1

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>
Pavlo
  • 43,301
  • 14
  • 77
  • 113
chowwy
  • 1,126
  • 8
  • 26
  • 45

1 Answers1

2

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

Community
  • 1
  • 1
Dustin
  • 966
  • 8
  • 15
  • The font awesome icons are showing up everywhere else, so it's most likely not a permission issue. – chowwy Feb 02 '13 at 16:22
  • Ahh. I dont know how your CSS would know to use the icon font. Try adding font-family: FontAwesome; to the CSS? – Dustin Feb 02 '13 at 19:20
  • dds1024: could be, will give it a try. – chowwy Feb 03 '13 at 15:49
  • You know, it really was that simple. I should've realized that the font-family was specified in the FontAwesome CSS file only, and not in my main CSS. Accepted and upvoted! – chowwy Feb 03 '13 at 15:54