Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Изменить цвет текст в шрифте Awesome

Поддержи проект!!! smile

Изменить цвет или покрасить в другой цвет текст в шрифте Awesome – не просто, а очень просто!

Цвет меняется так же, как и в других шрифтах.

Вариант №1 изменение цвета шрифта Awesome

Изменить цвет в шрифте Awesome можно прямо в коде иконки шрифта:

Как изменить цвет иконки Awesome

Нам в коде шрифта иконки Awesome добавить стиль(style) и туда прописать новый цвет, например красный:

style="color:red; font-size: 15px;"

Код шрифта Awesome изменного в коде

<i class="fa fa-home" aria-hidden="true" style="color:red; font-size: 15px;"></i>

Результат:

Вариант №2 изменение цвета шрифта Awesome в файле css

Теперь изменим цвет шрифта Awesome с помощью файла css.

Чтобы цвет не шрифта не менялся по всему сайту, нам нужно для демонстрации процесса добавить любой новый класс к коду нашего шрифта Awesome - например : ok_blue

В файл css добавляем:

i.fa.fa-home.ok_blue {

color: blue;

}

Иконка шрифта - код :

<i class="fa fa-home ok_blue" aria-hidden="true"></i>

Результат:


Вас может еще заинтересовать список тем : #CSS | #FONT_AWESOME | #FONTS | #ICON | #COLOR |
Последняя дата редактирования : 2020-04-30 07:51
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Изменить цвет текст в шрифте Awesome

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.