Как мне использовать шрифты fontello?

Question

Согласно одному источнику, так я использую шрифты Fontello:

Теперь тривиально сделать пользовательский значок веб-шрифта именно для ваших нужд. Сначала выберите значки, которые вам нравятся. Затем обновите коды глифов (необязательно) и загрузите пакет веб-шрифтов. Fontello генерирует все, что вам нужно, а затем вы загружаете пакет через страницу конфигурации этого модуля! Это так просто!

Хорошо. Что теперь? Как мне вызвать один из их значков на моей веб-странице?

Answer 1

Внутри пакета есть папка "font" и папка "css".

1. Переместите папку шрифтов в ваш проект. Ваш проект может выглядеть примерно так:

    / Проект-корень
   - / таблицы стилей
   -- /изображений
   - /javascripts
   -- /шрифт 

2. Включите Fontello CSS. Внутри папки "css" в комплекте вы увидите:

    [Yourfontname] -codes.css
   [Yourfontname] -embedded.css
   [Yourfontname] -ie7-codes.css
   [Yourfontname] -ie7.css
   [Yourfontname].css 

   В большинстве случаев вам понадобится только [yourfontname].css, Включите эту таблицу стилей в свой проект.

3. внутри [yourfontname].css это @font-face правило, которое импортирует шрифт. Убедитесь, что пути к шрифтам указывают в нужное место. По умолчанию они будут выглядеть в ../font/,

4. Чтобы использовать ваши значки, добавьте class="icon-ICON_NAME" к элементу, который вы хотите иметь значок. Вы можете увидеть список имен значков в нижней части [yourfontname].css,

5. Необязательно: Фонтелло кладет margin-right: .2em на значке, потому что он ожидает, что вы будете использовать значок с текстом, но иногда вам может потребоваться автономный значок. Я люблю использовать <i> теги для отдельных значков, поэтому я добавляю следующее правило в конец fontello css:

    я [класс ^="значок -"]: до, я [класс *="значок -"]: до {
     поле: 0;
   } 

   Теперь, если вы положите class="icon-ICON_NAME" на <i> тег, он не будет иметь никаких нежелательных полей.

Answer 2

Чтобы обновить существующие значки:

1. Перейдите на страницу https://fontello.com/
2. Используйте кнопку правой верхнюю для Импорта[...]/fontello/config.json файл.
3. Найдите новые значки и выберите их (просто щелкните, без перетаскивания)
4. Загрузите обновленный архив с помощью правой верхней кнопки
5. Перезаписать все файлы в [...]/fontello каталог.