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: 21:35
Heb je het aanroepen van de stylesheet wel in je head staan?

  • ElBarto2278
  • Registratie: September 2015
  • Laatst online: 24-01 21:21
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]


  • b2vjfvj75gjx7
  • 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: 19:38
Je zou het icoon ook altijd nog als svg kunnen linken of embedden.
Op de website van FontAwesome zelf doen ze dat ook.

  • b2vjfvj75gjx7
  • 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


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee