TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan fikse fantastiske fantastiske ikoner som vises som boks?

7

I webutvikling er det vanlig å bruke skriftikoner i SVG -format i stedet for å skrive symboler ved hjelp av fluktenheter. For eksempel er Font Awesome -ikonene mest populære på grunn av skalerbarheten til ikonene uten å miste kvalitet. Imidlertid, hvis du ikke implementerer riktig skrift, vil fantastiske ikoner vises som boks. Hvis du har problemer med skriftikonene, kan du se hvordan du fikser det.

Bruke ikonene Font Awesome på nettstedet

Det er to måter å bruke skriftikon på nettstedet ditt. Den ene er å bruke i HTML -tag og den andre er å bruke CSS -pseudoklasser. I begge metodene bør du koble kildefonten awesome CSS og være vert for skriftfilene på serveren din slik at riktige stiler kan brukes på ikonene. Nedenfor er et eksempel på bruk av font fantastisk i HTML:

Hvordan fikse fantastiske fantastiske ikoner som vises som boks?

Bruke Font Awesome

Sjekk denne artikkelen fra det offisielle nettstedet om hvordan du bruker skriftikoner på nettstedet ditt. Når noe mangler ved lasting, vil du se boksen som nedenfor i stedet for ikonet.

Hvordan fikse fantastiske fantastiske ikoner som vises som boks?

Fontikon såboks

Hvorfor ikonene for fantastiske skrifttyper som bokser?

For å sette inn et skriftikon på nettstedet ditt, må du ha følgende:

  • Vert fonter på serveren din
  • Link riktig font fantastisk CSS -versjon
  • Ingen konflikt med gamle og nye versjoner på samme nettsted
  • Sjekk riktig skriftfamilie
  • Bruk riktig CSS -klasse
  • Sjekk skriftvekten
  • Sjekk CSS -innholdskoden

La oss sjekke ut enkelhetspunktet i detalj.

1 Vert fonter på serveren din

For å bruke font fantastisk på nettstedet ditt, er det nødvendig å være vert for fontfilene også i den samme katalogen. Alle skrifttyper for nettfonter skal være tilgjengelige i "/webfonts" -mappen og refereres til CSS -en i "/css" -mappen.

I de fleste tilfeller vil temaet eller programtillegget du bruker installere alle nødvendige CSS- og skriftfiler på serveren din. Dette er tilfellet, spesielt når du bruker WordPress for nettstedet ditt.

2 Lenke til riktig CSS -versjon

Font awesome var tilgjengelig gratis til versjon 4.70. Imidlertid er det både gratis og pro -versjoner tilgjengelig fra versjon 5.0. Selv om versjon 4.70 var utdatert, bruker de fleste gratis plugins og temaer fremdeles 4,70 på grunn av den ensartede CSS -klassen og brukervennligheten. Imidlertid har versjon 5.0 merker og solide stiler for gratisbrukere, og du kan bruke all.css til å inkludere begge stiler.

Du kan enten registrere deg med et fantastisk nettsted for å få et CDN -sett eller bruke CDN -filene som er tilgjengelige fra Cloudflare.

Hvordan fikse fantastiske fantastiske ikoner som vises som boks?

Skaff deg Font Awesome CDN Kit

3 Motstridende CSS -versjoner

Et av problemene vi har møtt med et WordPress -nettsted er at et plugin brukte versjon 4.70 og temaet brukte 5.0. Dette forårsaket konflikten på grunn av inkompatible CSS -klasser og innholdskoder. Sørg derfor for å bruke den nyeste versjonen 5.0 med riktig CSS -kildefil på nettstedet ditt.

Hvordan fikse fantastiske fantastiske ikoner som vises som boks?

Skriftikoner som vises som boks

4 Bruk riktig skriftfamilie

For å bruke fantastisk skrifttype med CSS, bør du bruke riktig skriftfamilie. Nedenfor er typen CSS -kode som brukes i versjon 4.70.

.li: før {
innhold: "00A3 ″; font-family: “FontAwesome”; font-weight: normal; }

Dette vil imidlertid vise en boks i stedet for et ikon med versjon 5.0. du bør bruke følgende CSS med versjon 5.0 gratisversjon.

.li: før {
innhold: “00A3 ″; font-family: ” Font Awesome 5 Free “; font-vekt: 900 ; }

Sørg derfor for å bruke riktig "Font Awesome 5 Free" fontfamilie i CSS. I tillegg, hvis du bruker sosiale ikoner, bør skriftfamilien være "Font Awesome 5 Brands". Dette er de to skriftfamiliene som er tilgjengelige for gratisbrukere.

5 Bruk riktig CSS -stilprefiks

En annen forvirring er at versjon 5.0 har forskjellige CSS -klasser enn de tidligere versjonene. På versjon 4.7 kan du bruke fa -stilprefikset som nedenfor:

<i class = “fa fa-kamera”>

Dette vil imidlertid ikke fungere med versjon 5.0 og senere. Fa -stilprefikset ble utdatert, og du bør bruke fas for solide ikoner og fab for sosiale merkevarer som Facebook.

6 Kontroller skriftvekt

Font awesome versjon 5.0 støtter ikke generell "font-weight: normal" -erklæring i CSS. Du bør deklarere spesifikk skriftvekt for at ikonet skal vises.

7 Sjekk CSS Content Code

Det siste punktet er å sørge for at innholdskoden som brukes i CSS er korrekt. Du må bruke en av den tilgjengelige koden fra font -awesome -nettstedet i CSS -pseudo -element. I tillegg må du sørge for å bruke koden i formatet "f00d"; for å vise ikonet riktig.

Sammendrag

Nedenfor er en oppsummering av skriftfamilie, skriftvekt, stilprefiks og stiler tilgjengelig gratis og pro -brukere. Du må sørge for at alle disse er riktige for at ikonet skal vises i stedet for en boks.

Stil Tilgjengelighet Font Vekt Stilprefiks Font Family
Fast Gratis 900 du gjør Font Awesome 5 Free eller Font Awesome 5 Pro
Regelmessig Pro 400 langt Font Awesome 5 Pro
Lys Pro 300 fal Font Awesome 5 Pro
Duotone Pro 900 kjepphest Font Awesome 5 Duotone
Merker Gratis 400 fab Font Awesome 5 Merker

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon