Kuidas kasutada Font Awesome v5.7.2 HTML-iga

Font Awesome on üks populaarsemaid viise oma saidile ikoonide lisamiseks. Aga mis siis, kui lisate oma lehe elemendile CDN-i ja kõik, mida näete, on mustad ristkülikud?

Siin on paar asja, mida peate järgmisse projekti Font Awesome lisamisel meeles pidama.

Lisage link pea juurde

Kujutage ette, et teil on järgmine HTML:

Nagu teised CDN-id, peate ka teesse lisama elemendi . Font Awesome 5.7.2 puhul näeb see välja umbes selline:

Online vs kohalik

Kui käivitate järgmise koodi veebipõhises redaktoris, nagu CodePen või CodeSandbox, renderdatakse järgmine kood ikoone õigesti:

Kuid kui proovite lehte brauseris lokaalselt avada, näete ikoonide asemel ikkagi musti ristkülikuid:

Võtke teine pilk hrefon element eespool. Kas sa näed seda?

Probleem on selles, et kui laadite lehe oma kohalikust failisüsteemist, üritab brauser failisüsteemi juurest leida Font Awesome CSS-faili.

Asjade võrgus ja kohapeal toimimiseks lisage kindlasti URL-i skeem (HTTP või parem, HTTPS) järgmisele href:

Mis siin toimub?

Kui jätate URL-i skeemi ( href="//use.fontawesome...") kasutamata, kasutab brauser sama URL-i skeemi, kuhu leht laaditi.

Nii et kui käivitate lehe lokaalselt, käivitades HTML-faili brauseris, hrefeeldab, et Font Awesome CSS on ka fail, mis salvestatakse ka lokaalselt ( file:).

Lihtsalt veenduge, et hrefteie elementide atribuudid osutaksid kogu URL-ile, sealhulgas URL-i skeemile, ja teil peaks olema hea minna.