Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

Font-Awesome Icon wordt niet getoond

Pagina: 1
Acties:

Onderwerpen

Vraag


  • jbijman
  • Registratie: oktober 2018
  • Laatst online: 24-10-2018
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]

Alle reacties


  • Deef_K
  • Registratie: september 2007
  • Laatst online: 14:02
Heb je het aanroepen van de stylesheet wel in je head staan?

  • ElBarto2278
  • Registratie: september 2015
  • Laatst online: 17:59
Misschien nog de font-family specificeren op FontAwesome:

code:
1
2
3
4
.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
  • Registratie: juli 2005
  • Niet online
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:
1
   font-family: FontAwesome;

Bij FontAwesome 5 gebruik je een van de volgende (afhankelijk of je de free of pro versie hebt):
code:
1
2
   font-family: "Font Awesome 5 Free";
   font-family: "Font Awesome 5 Pro";

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


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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
  • Registratie: juni 2002
  • Niet online
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:

Maak je niet druk, dat doet de compressor maar


  • _NooT_
  • Registratie: juni 2018
  • Laatst online: 20:02
Je zou het icoon ook altijd nog als svg kunnen linken of embedden.
Op de website van FontAwesome zelf doen ze dat ook.

  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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:
1
../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...

Pagina: 1


Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True