Как включить локальный файл шрифта awesome 4.1 без использования CDN?

With font awesome effect Это эффект от шрифта удивительный, я могу получить его, когда я использую шрифт awesome 4.1 CDN)

enter image description here Используя загруженные файлы, я включил папку шрифтов и font-awesome.css, но по-прежнему не отображается значок.

enter image description here Моя ссылка правильная.

enter image description here Путь к файлу font-awesome.css, я ничего не менял.

enter image description here папки и файлы каталогов.

enter image description here внутри папки шрифтов.

enter image description here внутри папки css.

*********************************************** ************************************************** ********************************
Я уже решил проблему. Это связано с ошибкой при вводе кода. Я набираю шрифтовый стиль v3.1

 <i class="icon-twitter-sign icon-x3"></i>

и теперь я использую v4.1, поэтому он не работает. Это должно быть

 <i class="fa fa-twitter icon-x3"></i>

чтобы он работал.

Ответы

Ответ 1

  • Загрузите файл fontawesome со своего веб-сайта.
  • Извлеките пакет, в котором вы найдете файл fontawesome.css.
  • Скопируйте этот файл в каталог css
  • скопируйте все файлы шрифтов из извлеченного файла fontovesome в папку с вашими шрифтами.
  • Наконец, добавьте файл fontawesome.css на страницу html, указав соответствующее местоположение файла css.

И Вуаля!

Ответ 2

Просто загрузка Css и ссылка на файл не будут иметь смысла, вы должны посмотреть в файл css....

Вы havent Загрузили папку шрифтов, в которой хранятся все стили шрифтов... Скачайте его и укажите путь к файлам шрифтов, расположенным в вашей системе, Я показал ссылки в блоках, которые вам нужны, чтобы добавить ссылки в font-awesome css файлы..

Загрузите шрифты из ссылок cdn и сохраните их в папке шрифтов..

bootstram font awesome

Надеюсь, это сработает для вас.

Ответ 3

Вы можете обнаружить, что опции разработчика в вашем любимом браузере подскажут вам, почему файл не работает.

Для шрифта awesome требуются файлы шрифтов, которые поставляются вместе с ним. Файл CSS будет ссылаться на них и попытаться включить их, но в настоящее время не сможет их найти.

Загрузите font-awesome-4.1.0.zip из FontAwesome

Затем распакуйте его и поместите папки css и fonts в ваш проект. Затем вы можете ссылаться на файл как:

<link href="css/font-awesome.min.css" rel="stylesheet">

Ответ 4

Поскольку я использую FontAwesome V5.3.1, я хотел бы обновить этот ответ, поскольку структура папок в этой версии была немного изменена.

  1. Сначала загрузите FontAwesome v5.3.1 и распакуйте папку.
  2. Скопируйте файл all.min.css из папки CSS и добавьте его в свои таблицы стилей.
  3. Теперь скопируйте папку webfonts из FontAwesome extract и поместите ее в свой проект на один каталог выше в ваш файл all.min.css. (См. Изображение ниже)

enter image description here

Поскольку all.min.css файл относится к webfonts папке теперь нам нужно добавить этот файл вместе с webfonts папкой.

src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.

Спасибо.

Ответ 5

  • Скачать fontawesome (font-awesome-4.7.0): http://fontawesome.io/get-started/
  • Разархивируйте и скопируйте в свой проект как есть.
  • В HTML-ссылке font-awesome.min.css, например: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">

Ответ 6

Важно обеспечить относительные ссылки на файлы eot & woff, отличные от css, в случае, если вы используете .htaccess

1) распакуйте скачанный zip файл в нужный каталог

в случае если .htaccess путь

H:\virtualhost\.htaccess

и Fontawesome CSS и путь шрифтов

H:\VirtualHost\fontawesome-свободной 5.4.2-веб\CSS

H:\VirtualHost\fontawesome-свободной 5.4.2-веб\Веб-шрифты

2) Сделайте следующие записи в .htaccess

RewriteRule ^ css/([^/] *). Css $/fontawesome-free-5.4.2-web/css/$1.css [L]

RewriteRule ^ webfonts/([^/] *). Eot $/fontawesome-free-5.4.2-web/webfonts/$1.eot [L]

RewriteRule ^ webfonts/([^/] *). Woff2 $/fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]

RewriteRule ^ webfonts/([^/] *). Woff $/fontawesome-free-5.4.2-web/webfonts/$1.woff [L]

3) Добавьте следующую в заголовок html

HTTP://локального IP-адрес: порт /CSS/all.css