Hogyan használjuk a Font Awesome v5.7.2-et HTML-vel

A Félelmetes betűtípus az egyik legnépszerűbb módszer ikonok hozzáadásához a webhelyéhez. De mi van akkor, ha a CDN-t hozzáadja az oldal eleméhez, és csak fekete téglalapokat lát?

Itt van egy pár dolog, amelyet érdemes szem előtt tartani, amikor a következő projekthez hozzáadja a Font Awesome lehetőséget.

Adja hozzá a linket a fejhez

Képzelje el, hogy a következő HTML-t használja:

A többi CDN-hez hasonlóan hozzá kell adnia egy elemet a . A Font Awesome 5.7.2 esetében ez így fog kinézni:

Online vs helyi

Ha a következő kódot futtatja egy webalapú szerkesztőben, például a CodePen vagy a CodeSandbox, a következő kód rendesen megjeleníti az ikonokat:

De ha megpróbálja helyileg megnyitni az oldalt egy böngészőben, akkor is az ikonok helyett a fekete téglalapokat látja:

Vegyünk egy pillantást az hrefa elem felett. Látod?

A probléma az, hogy amikor betölti az oldalt a helyi fájlrendszerből, a böngésző megpróbálja megtalálni a Font Awesome CSS fájlt a fájlrendszer gyökerében.

A dolgok online és helyi működéséhez feltétlenül adja hozzá az URL-sémát (HTTP vagy jobb, HTTPS) a következőhöz href:

Mi folyik itt?

Amikor elhagyja az URL-sémát ( href="//use.fontawesome..."), akkor a böngésző ugyanazt az URL-sémát használja, amellyel az oldal betöltődött.

Tehát ha lokálisan futtatja az oldalt a HTML fájl böngészőben történő futtatásával, akkor hrefa Font Awesome CSS azt is feltételezi, hogy egy fájl is, amelyet szintén helyileg mentenek ( file:).

Csak győződjön meg arról, hrefhogy az elemei attribútumai a teljes URL-re mutatnak, beleértve az URL-sémát is, és jónak kell lenned.