Font Awesome Icon not appearing

Question

Having some difficulties with Font Awesome and was wondering if anyone could point me in the right direction? This is what I have

<head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>

<body>
    <div class="sectionTitle">
      <div class="section colour1">
        <i class="fa fa-camera-retro fa-3x">Camera 3px</i>
      </div>
    </div>
</body>

When the page is then rendered however the camera icon is not appearing, although the Camera 3px text is. I'm sure I've overlooked something fundamental here. Any thoughts at all on this would be great.

Thanks

It's working fine. http://jsfiddle.net/Y5GUA/. Are you running the development machine offline ? — Pugazh, Jun 16 '14 at 13:06
Consider moving the `Camera 3px` text outside of the `i` tag: ` Camera 3px` — Chris Peters, Jun 16 '14 at 13:32
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:02

score 1 · Answer 1 · answered Jun 16 '14 at 13:06

1

It is loading here:

<head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"     rel="stylesheet"/>
</head>

<body>
    <div class="sectionTitle">
      <div class="section colour1">
        <i class="fa fa-camera-retro fa-3x">Camera 3px</i>
      </div>
    </div>
</body>

http://jsfiddle.net/CLVx4/

Guess you did it all correct.

answered Jun 16 '14 at 13:06

Niek Vandael

394
1
3
15

2

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Sergey Kalinichenko Jun 16 '14 at 13:27
@dasblinkenlight I agree this is not an answer, so why was my flag disputed? – Andy Jun 16 '14 at 13:39
@Andy I have no idea, I am not a moderator. I came across this question in a review queue, so the comment was provided on my behalf automatically. – Sergey Kalinichenko Jun 16 '14 at 15:25
1

Probably because he has not enough reputation to add a comment – GuyT Jun 17 '14 at 08:48

Andy · Answer 2 · 2014-06-16T13:22:53.073

Your code looks correct so I think the problem is elsewhere.

If you are viewing the page through file:// URI scheme, rather than http://, the link to the external CSS file will not work without specifying http:// explicitly in the link url, this has caught me out plenty of times. May be worth changing the link to:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

Font Awesome Icon not appearing

2 Answers2