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

Question

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

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

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

Answer 1

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

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

   /project-root 
   -- /stylesheets 
   -- /images 
   -- /javascripts 
   -- /font

2. Включите CSS Fontello. В папке «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. Дополнительно: Fontello ставит margin-right: .2em на иконку, потому что он ожидает, что вы использовать значок с текстом, но иногда может потребоваться автономный значок. Мне нравится использовать <i> тегов для автономных иконок, поэтому я добавляю следующее правило в нижнюю части fontello CSS:

   i[class^="icon-"]:before, i[class*=" icon-"]:before { 
       margin: 0; 
   }

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