Как подключить Font Awesome 5.8.1 локально (не через CDN)

175

10 января 2020, 06:40

Как правильно подключать font awesome 5, меня интересует только локальный способ, через CDN не предлагать, хочу использовать SVG иконки, подключаю как и положено: помогите кто знает

Подключаю в head

<script src="fontawesome/all.js"></script>

html-css код:

<div class="icon"></div>
.icon::before {
    content: "\f17b";
}

Answer 1

У меня для Вас плохие новости. Если хотите использовать HTML сущности или unicode Вам нужно через CSS версию грузить FA.

Когда был написан стандарт SVG, поддержка веб-шрифтов еще не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.

SVG-шрифты корректно поддерживаются только в Safari. Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили ее реализацию на неопределенное время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.

Ява версия FA использует SVG Font... Думаю Вы уже догадались к чему я клоню.

Ниже решение как корректно использовать CSS и вставлять символы FA посредством собственного CSS

.icon::before { 
  font-family: 'Font Awesome\ 5 Free'; 
  content: '\f641'; 
  font-weight: 900; 
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 
 
<i class="fas fa-user"></i> 
 
<span class="icon"></span>

Answer 2

Вся информация есть на оф. сайте - документация.

А так же, запросы в поисковик можно и на английском языке писать, в основном там обширней информация.

Добавьте локальные пути к all.css и all.js файлам Font Awesome. Проверьте пути в css файле, которые ссылаются на шрифты в разных форматах.

Ответ на вопрос на англоязычной версии сайта

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сверстать круговой график на svg

Есть такой вот макет

134

HTML

Сверстать рамку с градиентом

Есть такой макет

141

HTML

Не выводится изменённая переменная

есть DIV элемент у которого есть атрибут onclick вызывающий эту функцию

130

HTML

Ошибка в коде: не видит переменную(вроде)

В предпоследней строчке("moneyDivinnerHTML = moneyNum;") браузерный редактор выдаёт ошибку "Uncaught ReferenceError: moneyDiv is not defined at HTMLDivElement

197