-2

For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.

enter image description here

Taylan Aydinli
  • 4,333
  • 15
  • 39
  • 33
frank_x
  • 11
  • 4
  • 5
    that's not very awesome. – Kristian Aug 20 '13 at 22:08
  • 2
    can you post your `` tags where you include both files? – omma2289 Aug 20 '13 at 22:08
  • 1
    Or even create a [jsFiddle](http://jsfiddle.net) to isolate your problem? – edsioufi Aug 20 '13 at 22:10
  • 1
    Figured it out, I'm just an idiot and didn't set rel="stylesheet" so the only icons I could use are the default bootstrap. Thanks all – frank_x Aug 20 '13 at 22:24
  • This showed up in related questions... if you're still looking for the solution see this answer I just wrote: http://stackoverflow.com/questions/36812241/font-awesome-not-appearing-in-the-browser – maraca Apr 23 '16 at 15:00

1 Answers1

0

It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:

<span class="icon-stack">
    <i class="icon-minus icon-stack-base"></i>
    <i class="icon-camera icon-light"></i>
</span>

In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.

Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
  • 1
    Even with the added "on" class the icons should still load – omma2289 Aug 20 '13 at 22:28
  • @koala_dev In his example, the second class overwrites the first class. This is because he's using both classes on the same element, instead of stacking them. – Mike Robinson Aug 20 '13 at 23:05
  • I know, but even if he has "icon-camera on icon-minus" the minus icon should load, anyways the issue is now solved – omma2289 Aug 20 '13 at 23:16