Як використовувати Font Awesome v5.7.2 з HTML

Шрифт 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-адреси, і вам слід бути готовим.