TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur fixar jag fantastiska ikoner som visas som låda?

2

I webbutveckling är det vanligt att använda typsnittsikoner i SVG -format istället för att skriva symboler med hjälp av escape -enheter. Till exempel är Font Awesome -ikoner mest populära på grund av ikonernas skalbarhet utan att förlora kvalitet. Men om du inte implementerar korrekt teckensnitt kommer fantastiska ikoner att visas som rutan. Om du har problem med teckensnittsikoner, kolla in hur du åtgärdar det.

Använda Font Awesome -ikoner på webbplatsen

Det finns två sätt att använda teckensnittsikoner på din webbplats. Den ena är att använda i HTML -tagg och den andra är att använda CSS -pseudoklasser. I båda metoderna bör du länka källteckensnittet fantastiska CSS och vara värd för teckensnittsfilerna på din server så att rätt stilar kan tillämpas på ikonerna. Nedan är ett exempel på hur du använder fantastiskt teckensnitt i HTML:

Hur fixar jag fantastiska ikoner som visas som låda?

Använda Font Awesome

Läs den här artikeln från den officiella webbplatsen om hur du använder teckensnittsikoner på din webbplats. När något saknas vid laddning ser du rutan som nedan istället för ikonen.

Hur fixar jag fantastiska ikoner som visas som låda?

Font Icon Sow Box

Varför Font Awesome -ikoner visas som låda?

För att infoga en teckensnittsikon på din webbplats måste du ha följande:

  • Värdteckensnitt på din server
  • Länka rätt typsnitt fantastisk CSS -version
  • Ingen konflikt med gamla och nya versioner på samma webbplats
  • Kontrollera rätt typsnittsfamilj
  • Använd rätt CSS -klass
  • Kontrollera typsnittets vikt
  • Kontrollera CSS -innehållskoden

Låt oss kolla in lätthet i detalj.

1 Värdteckensnitt på din server

För att kunna använda fantastiska teckensnitt på din webbplats är det nödvändigt att vara värd för teckensnittsfilerna i samma katalog. Alla teckensnitt för webbteckensnitt ska vara tillgängliga i mappen “/webfonts" och refereras till CSS i mappen “/css”.

I de flesta fall installerar temat eller tillägget du använder alla nödvändiga CSS- och teckensnittsfiler på din server. Detta är fallet, särskilt när du använder WordPress för din webbplats.

2 Länk korrekt CSS -version

Font awesome var tillgängligt gratis till version 4.70. Det finns dock både gratis- och proversioner tillgängliga från version 5.0. Även om version 4.70 var föråldrad använder de flesta gratis plugins och teman fortfarande 4,70 på grund av den enhetliga CSS -klassen och användarvänligheten. Men version 5.0 har märken och solida stilar för gratisanvändare och du kan använda all.css för att inkludera båda stilarna.

Du kan antingen registrera dig med en fantastisk font för att få ett CDN -kit eller använda CDN -filerna från Cloudflare.

Hur fixar jag fantastiska ikoner som visas som låda?

Skaffa Font Awesome CDN Kit

3 Motstridiga CSS -versioner

Ett av problemen vi har mött med en WordPress -webbplats är att ett plugin använde version 4.70 och temat använde 5.0. Detta orsakade konflikten på grund av inkompatibla CSS -klasser och innehållskoder. Se därför till att använda den senaste versionen 5.0 med rätt CSS -källfil på din webbplats.

Hur fixar jag fantastiska ikoner som visas som låda?

Teckensnittsikoner visas som låda

4 Använd rätt typsnittsfamilj

För att använda fantastiskt teckensnitt med CSS bör du använda rätt typsnittsfamilj. Nedan visas den typ av CSS -kod som används i version 4.70.

.li: före {
innehåll: “00A3 ″; font-family: “FontAwesome”; font-weight: normal; }

Detta kommer dock att visa en ruta istället för en ikon med version 5.0. du bör använda följande CSS med version 5.0 gratisversion.

.li: före {
innehåll: “00A3 ″; font-family: ” Font Awesome 5 Free “; typvikt: 900 ; }

Se därför till att använda rätt “Font Awesome 5 Free” teckensnittsfamilj i CSS. Dessutom, om du använder sociala ikoner bör teckensnittsfamiljen vara "Font Awesome 5 Brands". Det här är de två teckensnittsfamiljerna som är tillgängliga för gratisanvändare.

5 Använd korrekt CSS -stilprefix

En annan förvirring är att version 5.0 har olika CSS -klasser än de tidigare versionerna. På version 4.7 kan du använda fa -stilprefixet som nedan:

<i class = “fa fa-kamera”>

Detta fungerar dock inte med version 5.0 och framåt. Fa -stilprefixet utfärdades och du bör använda fas för fasta ikoner och fab för sociala varumärkesikoner som Facebook.

6 Kontrollera typsnittet

Font awesome version 5.0 stöder inte allmän “font-weight: normal” -deklaration i CSS. Du bör deklarera specifik typsnittsvikt för att ikonen ska visas.

7 Kontrollera CSS -innehållskod

Den sista punkten är att se till att innehållskoden som används i CSS är korrekt. Du måste använda en av den tillgängliga koden från typsnittet awesome site i CSS pseudo -element. Se till att du använder koden i formatet "f00d"; för att visa ikonen korrekt.

Sammanfattning

Nedan finns en sammanfattning av teckensnittsfamilj, typvikt, stilprefix och stilar tillgängliga gratis och proffsanvändare. Du måste se till att alla dessa är korrekta för att ikonen ska visas istället för en låda.

Stil Tillgänglighet font Vikt Stilprefix font Family
Fast Fri 900 du gör Font Awesome 5 Free eller Font Awesome 5 Pro
Regelbunden Proffs 400 långt Font Awesome 5 Pro
Ljus Proffs 300 fal Font Awesome 5 Pro
Duotone Proffs 900 fluga Font Awesome 5 Duotone
Varumärken Fri 400 fab Font Awesome 5 märken

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer