font-awesome учебник
Начало работы с шрифтом-удивительным

замечания

Настроить

Различные подходы могут быть использованы для интеграции FontAwesome в веб-сайт:

Для простого HTML / CSS:

• Загрузите zip здесь , распакуйте и скопируйте содержимое на свой сайт. Затем ссылки на /css/font-awesome.css на веб - странице head , как так:
  
  <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
• Ссылочная его в веб - страницы head , используя адрес CDN. Одним из таких адресов будет https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css . Чтобы ссылаться на это, просто используйте тег link но вместо этого установите источник на адрес CDN

Для менеджеров пакетов:

Большинство менеджеров пакетов поддерживают шрифт Awesome в качестве пакета, и есть несколько примеров ниже:

• NuGet: просто найдите и установите Font-Awesome или выполните команду ниже в консоли пакета: Install-Package FontAwesome
• Ruby: Запустите эту команду: gem install font-awesome-rails
• npm: просто запустите эту команду: npm install font-awesome

Основной пример: использование значка

Простой пример использования - это ссылка на один значок в его нормальном размере: <i class="fa fa-camera-retro"></i> (Посмотрите результат в этой скрипке.)

Создайте пустой тег (рекомендуется использовать для этого <i> ) и назначьте класс « fa » и класс, соответствующий желаемому значку (см. Список значков здесь ).

Использование шрифта Awesome

Font Awesome - чрезвычайно простая, но мощная библиотека для использования, с 634 значками, доступными всего несколькими словами.

Как это работает? Font Awesome использует символы Unicode, хранящиеся в каталоге ../fonts чтобы изменить любые элементы i.fa на соответствующий символ Юникода, так как отображение этого значка в виде текста.

Как создать значок? Все классы значков должны быть элементом i или italic element , главным образом для лучшей практики, но также улучшает производительность с помощью Font Awesome. Все значки также имеют класс fa на них. Это означает значок и не будет работать без него . После этого просто добавьте значок, который вы хотите, с префиксом другого fa- . Ниже приведен готовый пример:

<i class="fa fa-pencil"></i> становится

Поскольку шрифт awesome работает с символами юникода, он также позволяет применять любые текстовые манипуляции к нему, такие как font-size , color и т. Д.