Part of font-awesome icon not displaying

Question

Strangely only a part of my font-awesome icon are displaying... do you have already encountered this problem?

I've checked everything from this other question but nothing worked.

So just to clarify: there should be a newspaper next to newsletter and a clock next to "Historique".

They are exactly the same elements :

<button value="newsl"><i class="fa fa-newspaper-o"></i> <em>Recevez la newsletter</em></button>
<button value="favoris"><i class="fa fa-heart"></i> <em>Mes favoris</em></button>
<button value="historique"><i class="fa fa-history"></i> <em>Historique</em></button>

And answer to no specific CSS style.

Where could the problem come from?

Here is a link where you can see the problem

From here I assumed it could come from an older version load with the theme template I'm using So I've found older versions and deleted them then load font-awesome from the last CDN possible. No progression anyway.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

@Krish obviously it would work on a fiddle --' Just for you https://jsfiddle.net/Baldrani/agt6qpy6/ — Baldráni, Feb 09 '16 at 11:06
@Baldráni check with the inspector tool if the icon has font size, it has a color or any other value, it's hard to tell what the problem could be if the fiddle works — LS_, Feb 09 '16 at 11:19
Do you have an actual link showing the issue we could look at..since it works in the JSfiddle? — Paulie_D, Feb 09 '16 at 11:20
Check the code for the typos. Clear cache and run it again ! — Dino, Feb 09 '16 at 11:20
@Baldráni, fiddle is okay, then can you provide a link with defected issue? — Krish, Feb 09 '16 at 11:22
@Signo As I've said, they all react to the same css. Since fa-heart is working this is not it — Baldráni, Feb 09 '16 at 11:23

score 3 · Accepted Answer · answered Feb 09 '16 at 11:32

I think your font-awesome css is not latest, when I imported latest font-awesome css file in to your screen.css it will working fine.

 @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

<button value="newsl"><i class="fa fa-newspaper-o"></i> <em>Recevez la newsletter</em></button>
<button value="favoris"><i class="fa fa-heart"></i> <em>Mes favoris</em></button>
<button value="historique"><i class="fa fa-history"></i> <em>Historique</em></button>

Yeah !! Great one ! So I dont understand why it was not good simply by the head... maybe du to gulpfile ?) — Baldráni, Feb 09 '16 at 11:36

score 1 · Answer 2 · answered Feb 09 '16 at 11:32

1

You are using FontAwesome 4.0.3 and fa-history has been added in 4.1 so it is completely not present in your font set.

answered Feb 09 '16 at 11:32

Maciej Kwas

6,169
2
27
51

score 0 · Answer 3 · answered Mar 11 '17 at 22:35

You can add this in .htaccess file in the directory of awesome font

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Part of font-awesome icon not displaying

3 Answers3