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