Font-Awesome Icon wordt niet getoond

[jbijman]

Ik probeer om een font-awesome icon te tonen in mijn Wordpress menu. Echter, er wordt een vierkantje getoond ipv het icoon.

Het gekke is dat hetzelfde icon wel in de footer getoond wordt als ik hem via HTML invoeg. Verder wordt in de header ook gebruik gemaakt van Font-awesome (standaard in het thema)


De volgende CSS code heb ik gebruikt:

.zakelijke-login a:before {
content:"\f2f6";
}

Hierbij is .zakelijke-login de class name van mijn menu item.

Ik heb al verscheidene plugins geprobeerd om de meest recente versie van Font-awesome te kunnen gebruiken, helaas zonder resultaat.

Onderstaand een voorbeeld:

https://www.dropbox.com/s...%20om%2010.00.21.png?dl=0

[Voor 10% gewijzigd door jbijman op 24-10-2018 10:02]

[Deef_K]

Heb je het aanroepen van de stylesheet wel in je head staan?

[ElBarto2278]

Misschien nog de font-family specificeren op FontAwesome:

code:

.zakelijke-login a:before {
    font-family: FontAwesome; 
    content:"\f2f6";
}

edit: [code] tags toegevoegd

[Voor 17% gewijzigd door ElBarto2278 op 24-10-2018 10:43]

[Skyaero]

ElBarto2278 schreef op woensdag 24 oktober 2018 @ 10:14:
Misschien nog de font-family specificeren op FontAwesome:

Aanvullend hierop

Voor Fontawesome 4 of lager specificeer je

code:

   font-family: FontAwesome;

Bij FontAwesome 5 gebruik je een van de volgende (afhankelijk of je de free of pro versie hebt):

code:

   font-family: "Font Awesome 5 Free";
   font-family: "Font Awesome 5 Pro";

[Voor 12% gewijzigd door Skyaero op 24-10-2018 10:30]

[deathgrunt]

Even de CORS checken - kan via F12.

Hoe vaak ik niet zie dat een font toch niet wordt ingeladen, omdat bv. de CORS verkeerd staan of een error in de .htaccess er voor zorgt dat de MIME niet goed wordt geïnterpreteerd...

Dan kan alles kloppen in je DOM, maar als het font daadwerkelijk niet - of corrupt - binnenkomt, helpt het nog niet.

[DJMaze]

jbijman schreef op woensdag 24 oktober 2018 @ 09:59:
Echter, er wordt een vierkantje getoond ipv het icoon.

Om die reden kan je beter unicode icoontjes als fallback gebruiken.

Ik gebruik uBlock Origin met remote fonts disabled, en dan ziet WordPress er zo uit:

[_NooT_]

Je zou het icoon ook altijd nog als svg kunnen linken of embedden.
Op de website van FontAwesome zelf doen ze dat ook.

[deathgrunt]

DJMaze schreef op donderdag 8 november 2018 @ 09:24:
[...]

Om die reden kan je beter unicode icoontjes als fallback gebruiken.

Ik gebruik uBlock Origin met remote fonts disabled, en dan ziet WordPress er zo uit:
[Afbeelding]

Vaag dat je die iconen niet ziet, want die worden gewoon "lokaal" geladen vanuit de WP repository zelf;

code:

../wp-includes/fonts/dashicons.eot

Ik blokkeer ook alles en nog wat, maar local assets laat ik gewoon door en dus ook die DashIcons van WP - zie screenshot...