Изменить цвет текст в шрифте Awesome
Изменить цвет или покрасить в другой цвет текст в шрифте Awesome – не просто, а очень просто!
Цвет меняется так же, как и в других шрифтах.
Вариант №1 изменение цвета шрифта Awesome
Изменить цвет в шрифте Awesome можно прямо в коде иконки шрифта:
Как изменить цвет иконки Awesome
Нам в коде шрифта иконки Awesome добавить стиль(style) и туда прописать новый цвет, например красный:
style="color:red; font-size: 15px;"
Код шрифта Awesome изменного в коде
Результат:
Вариант №2 изменение цвета шрифта Awesome в файле css
Теперь изменим цвет шрифта Awesome с помощью файла css.
Чтобы цвет не шрифта не менялся по всему сайту, нам нужно для демонстрации процесса добавить любой новый класс к коду нашего шрифта Awesome - например :В файл css добавляем:
i.fa.fa-home.ok_blue {
color: blue;
}
Иконка шрифта - код :
<i class="fa fa-home ok_blue" aria-hidden="true"></i>
Результат:
1000
+
=
Этим вы очень поможете проекту! Заранее огромное спасибо!
Теги:
Изменить цвет текст в шрифте Awesome
