Sådan bruges Font Awesome v5.7.2 med HTML

Font Awesome er en af ​​de mest populære måder at tilføje ikoner til dit websted. Men hvad hvis du tilføjer CDN til elementet på din side, og alt hvad du ser er sorte rektangler?

Her er et par ting, du skal huske på, når du tilføjer Font Awesome til dit næste projekt.

Føj linket til hovedet

Forestil dig, at du har følgende HTML:

Som andre CDN'er skal du tilføje et element til . For Font Awesome 5.7.2 vil det se sådan ud:

Online vs lokalt

Hvis du kører følgende kode i en webbaseret editor som CodePen eller CodeSandbox, gengiver følgende kode ikoner korrekt:

Men hvis du prøver at åbne siden lokalt i en browser, kan du stadig se de sorte rektangler i stedet for ikonerne:

Tag endnu et kig på hrefi elementet ovenfor. Kan du se det?

Problemet er, at når du indlæser siden fra dit lokale filsystem, prøver browseren at finde Font Awesome CSS-filen ved roden af ​​filsystemet.

For at få ting til at fungere online og lokalt, skal du sørge for at tilføje URL-skemaet (HTTP, eller bedre, HTTPS) til href:

Hvad sker der her?

Når du slipper URL-skemaet ( href="//use.fontawesome..."), bruger browseren det samme URL-skema, som siden blev indlæst med.

Så hvis du kører siden lokalt ved at køre HTML-filen i en browser, hrefantages det, at Font Awesome CSS også er en fil, der også gemmes lokalt ( file:).

Bare sørg for, at hrefattributterne for dine elementer alle peger på den fulde URL, inklusive URL-skemaet, og du skal være god at gå.