2

I selected a handful of icons to use, and they are all displaying except one. I compared my CSS with that of the icons page on the fontawesome site and I was missing some styles. I added the missing styles, but the icon still shows the placeholder instead of the icon.

HTML:

<i class="fa fa-pied-piper"></i>

CSS:

.fa-pied-piper-square:before,.fa-pied-piper:before {content: "\f1a7";}

Again, all the other icons (14 of them) are displaying correctly, just not this one.

(Font Awesome 4.0.3)

dvdbglw
  • 65
  • 6
  • Any error in console? – Svmurvj May 28 '14 at 14:10
  • Just checking: do you use a custom subset of glyphs? – Patrick Oscity May 28 '14 at 14:10
  • can you provide a link? – MilkyTech May 28 '14 at 14:20
  • we need to see the rest of your code. if its too much to paste here, create a fiddle. Many times I solve my own problems just by creating a fiddle and discover the error before even posting the question. does the problem exist over multiple browsers? – MilkyTech May 28 '14 at 15:23
  • No errors in the console. No custom glyphs. It's an intranet site, so I won't be able to share a link. I'm not sure what other code would help illuminate any issues. If I run Firebug and change 'fa-pied-piper' to 'fa-home' or to 'fa-gear' or several others, those show up just fine. I'll try a fiddle to see if that indicates anything interesting. This does persist across browsers. – dvdbglw May 29 '14 at 13:43

1 Answers1

-1

Are you using FontAwesome minified CSS? If so, you may need to omit the semicolon. I don't see semicolons listed in the minified CSS rules. Mine looks like this and works:

{content: "\f1a7"}

eatruncode
  • 1
  • I can't imagine that omitting the semicolon (which is being used correctly) would matter. I'm interested to see OP's reply. – ndugger May 28 '14 at 15:13
  • semi-colon is not required on the last rule of a css rule-set. doesn't make a difference if it is used or not – MilkyTech May 28 '14 at 15:20
  • I did try removing the semicolon which did not change anything. One interesting thing though; in Firefox the missing icon shows the placeholder as a square with 'f1a7' inside it. If I change the CSS in Firebug to something that doesn't exist (like fa-blahblah) the placeholder disappears. – dvdbglw May 29 '14 at 13:51