Август 2017
Автор: Рубрика: Верстка Комментариев нет

Подключаем шрифт font awesome иконки

Подключаем шрифт font awesome иконки

Подключаем шрифт font awesome к проекту.

Это шрифт с иконками, после подключения в верстку можно применять иконки.

Для начала скачаем шрифт с официального сайта. В архиве нам понадобятся две папки css и fonts.

Возьмем их и перейдем в чистый шаблон gulp.

В папке libs создадим папку font awesome и распакуем в нее две папки.

Копируем папки fontawesome

Подключаем файл css шрифта font-awesome

Вначале подключем css файл в Libs.sass.

Пропишем импорт и путь к файлу font-awesome.min.css.

Скриптов у шрифта нет. Все готово.

Теперь проверим, для этого перейдем на сайт font awesome, зайдем в раздел icons и выберем любую иконку и нажмем на нее.

Откроется новая страничка, где будет код иконки скопируем его целиком.

Подключаем стиль fontawesome

Код вставим в html. Открываем проект в браузере и увидим что иконка появилась.

Проверяем отображение иконок fontawesome

Чтобы управлять размером и цветом иконки

Откроем файл main.sass и в конце напишем размер шрифта 35 пикселей, а цвет красный.

Сохраняем и смотрим, что получилось.

Таким образом можно подключать любые иконки из коллекции данного шрифта. Любые другие иконки подключаются таким же способом.

Добавляем стиль иконкам fontawesome

Комментариев нет

Комментарии:

Комментарии запрещены