Согласно одному источнику, я использую шрифты Fontello:
Теперь тривиально сделать собственный веб-сайт значка, точно для ваших нужд. Сначала выберите нужные вам значки. Затем обновите коды глифов (необязательно) и загрузите пакет webfont. Fontello генерирует все, что вам нужно, а затем вы загружаете пакет через эту страницу конфигурации модуля! Это легко!
Хорошо. Что теперь? Как вызвать одну из своих значков на моей веб-странице?
Внутри пакета есть папка "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>, у него не будет никакого нежелательного поля.