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

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

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

Изменить цвет или покрасить в другой цвет текст в шрифте 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

Последние комментарии :
Марат :
21/10/2020 12:15
Поиск по словам... м...м... может быть... не задумывался... в принципе скрипт поиска есть, надо подумать, как это…
подробнее.
Anton :
21/10/2020 09:29
Как добавить картинку (с ПК), видео (с хостинга или ПК) ?Будет ли поиск по словам в комментариях…
подробнее.
Марат :
15/10/2020 03:29
Сегодня нам дали очередную десяточку к "ИКС" - у, теперь…
подробнее.
Марат :
15/10/2020 03:16
Здравствуйте. Первое, что на ум пришло по вашему вопросу:Найти первое повторяющееся слово и выделить…
подробнее.
Майя :
15/10/2020 11:14
Добрый день, не могли бы вы подсказать, как выделить только первое или, например , только второе одинаковое…
подробнее.