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

Ответ 1

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

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

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

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

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

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

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

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

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

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

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