Kako koristiti Font Awesome v5.7.2 s HTML-om

Font Awesome jedan je od najpopularnijih načina dodavanja ikona na vaše web mjesto. Ali što ako dodate CDN elementu svoje stranice i sve što vidite su crni pravokutnici?

Evo nekoliko stvari koje morate imati na umu kada dodate Font Awesome u svoj sljedeći projekt.

Dodajte vezu na glavu

Zamislite da imate sljedeći HTML:

Kao i drugi CDN-ovi, morate dodati element u . Za Font Awesome 5.7.2 izgledat će otprilike ovako:

Online vs lokalni

Ako pokrenete sljedeći kôd u web uređivaču kao što su CodePen ili CodeSandbox, sljedeći kôd pravilno prikazuje ikone:

Ali ako pokušate lokalno otvoriti stranicu u pregledniku, umjesto ikona i dalje ćete vidjeti crne pravokutnike:

Uzmi još jednom pogledati hrefu elementu gore. Vidiš li to?

Problem je u tome što kada učitate stranicu iz lokalnog datotečnog sustava, preglednik pokušava pronaći CSS datoteku Font Awesome u korijenu datotečnog sustava.

Da bi stvari funkcionirale na mreži i lokalno, dodajte shemu URL-a (HTTP ili bolje, HTTPS) na href:

Što se ovdje događa?

Kad izostavite shemu URL-a ( href="//use.fontawesome..."), tada preglednik koristi istu shemu URL-a s kojom je stranica učitana.

Dakle, ako stranicu pokrenete lokalno pokretanjem HTML datoteke u pregledniku, hrefpretpostavlja se da je CSS Font Awesome također datoteka koja se također sprema lokalno ( file:).

Samo se pobrinite da hrefatributi vaših elemenata usmjeravaju na puni URL, uključujući URL shemu, i trebali biste biti spremni.