Как да използвам Font Awesome v5.7.2 с HTML

Font Awesome е един от най-популярните начини за добавяне на икони към вашия сайт. Но какво, ако добавите CDN към елемента на вашата страница и всичко, което виждате, са черни правоъгълници?

Ето няколко неща, които трябва да имате предвид, когато добавите Font Awesome към следващия си проект.

Добавете връзката към главата

Представете си, че имате следния HTML:

Подобно на други CDN, трябва да добавите елемент към . За Font Awesome 5.7.2 ще изглежда по следния начин:

Онлайн срещу локално

Ако стартирате следния код в уеб-базиран редактор като CodePen или CodeSandbox, следният код прави правилни икони:

Но ако се опитате да отворите страницата локално в браузър, пак ще видите черните правоъгълници вместо иконите:

Вземете друг поглед към hrefв елемент по-горе. Виждаш ли го?

Проблемът е, че когато зареждате страницата от вашата локална файлова система, браузърът се опитва да намери CSS файла Font Awesome в корена на файловата система.

За да накарате нещата да работят онлайн и локално, не забравяйте да добавите URL схемата (HTTP или по-добре HTTPS) към href:

Какво става тук?

Когато оставите URL схемата ( href="//use.fontawesome..."), тогава браузърът използва същата URL схема, с която е заредена страницата.

Така че, ако стартирате страницата локално, като стартирате HTML файла в браузър, се hrefприема, че CSS Font Awesome също е файл, който също се запазва локално ( file:).

Просто се уверете, че всички hrefатрибути за вашите елементи сочат към пълния URL адрес, включително схемата за URL адреси, и трябва да сте добре.