Изменение цвета иконки Font Awesome внутри тега <a>

Быстрый ответ

Да, изменить цвет иконки шестеренки Font Awesome легко с помощью свойства CSS color. Вот как это делается для конкретной иконки:

<!-- Будь броским, как фламинго в стае обычных птиц -->
<i class="fa fa-cog" style="color: #FF0000;"></i> <!-- Иконка шестеренки красного цвета -->

Или же цвет всех иконок шестеренок можно изменить глобально через CSS:

/* Для любителей пурпура и индиго – эти стили для вас -->
.fa-cog {
  color: #FF0000; /* Подкрасим все иконки шестеренок в красный -->
}

Не забывайте заменять #FF0000 на нужнее вам шестнадцатеричное значение цвета.

Инлайновые стили против классов: Меньше проторенный путь

Вы предпочитаете индивидуальность или унификацию? Для однократных изменений подойдёт инлайновый стиль. Чтобы сохранять единый стиль сайта, лучше воспользоваться внешним файлом CSS:

/* Продемонстрируем шестеренки в эмо-стиле -->
a .fa-cog {
  color: black; /*Черные шестеренки повсюду, даже вложенные в тег `<a>` -->
}

Цвета с помощью классов: целая палитра в ваших руках

С помощью утилитарных классов фреймворка, таких как Tailwind CSS, можно быстро применять классы цветов. Добавьте class="text-[color]", чтобы изменить цвет:

<!-- Будь пикантным, красный цвет не только для роз и яблок -->
<i class="fa fa-cog text-red-500"></i> <!-- Иконка шестеренки красного цвета в стиле Tailwind -->

Не только цвет: расширяем границы воображения

Стилизация включает в себя гораздо больше, чем простое изменение цвета. Изменяйте размер, добавляйте тени и даже анимацию, чтобы создать для вашей иконки уникальный стиль:

/* Цифровой дождь в стиле Cyberpunk 2077 с красными шестеренками -->
.fa-cog {
  color: #FF0000; /* Оживляем красками */
  text-shadow: 2px 2px 4px #000000; /* Добавляем немного тени -->
}

Умело сочетайте утилитарные классы с тегом <i>, чтоб придать элементу больше искусства:

<!-- Всё вращается, как волшебный мир -->
<i class="fa fa-cog fa-3x fa-spin" style="color: #FF0000;"></i> <!-- Великая иконка шестеренки красного цвета. Оно вращается! -->

Визуализация

Вообразите, как обыкновенная иконка шестеренки Font Awesome (⚙️) становится хамелеоном, маскирующимся под листву:

До:           ⚙️ – Обыкновенная шестеренка на солнце
После CSS:    🦎 – Она вполне вписалась в окружающий её мир

CSS обрати вашу шестеренку (⚙️) в маскирующегося хамелеона на ^{🌿^} листве:

/* Готовится к повторению цветового карнавала на День святого Патрика -->
.fa-cog {
  color: #28a745; /* Хамелеон под листвой -->
}

Борьба с приоритетом в CSS

По закону Мерфи для CSS: "Цвет не изменится тогда, когда это будет особенно важно". Эта проблема обычно связана с иерархией правил стилей. Чтобы изменить это, увеличьте специфичность селектора или используйте !important. Однако имейте в виду, что с большим мощью !important приходит большая ответственность:

/* Непревзойденный вид одной шестеренки в мире CSS-стилей -->
#my-div .fa-cog {
  color: #29a8db !important; /* Вызывает восхищение среди остальных -->
}

Учитываем изменчивость вьюпорта: Отзывчивый дизайн

Используйте динамические цвета для динамичных интерфейсов. Медиазапросы и псевдоклассы позволяют иконкам шестеренок адаптироваться к любой среде. Теперь иконка будет вести себя как Золотой Снич в игре Квиддич:

/* Попробуйте поймать меня -->
.fa-cog:hover {
  color: #ffcc00; /* При наведении шестеренка становится золотой, как прямо из Хогвартса -->
}

Классы CSS освобождают вас от инлайн стилей и их темноты, предоставляя большую гибкость и контроль.

Полезные материалы

1. Документация Font Awesome — Узнайте, как изменять цвета иконок Font Awesome.
2. Введение в Font Awesome — Познакомьтесь с целым миром возможностей иконок Font Awesome.
3. Документация Font Awesome — Подбирайте идеи у Inline SVG, чтобы перевести игру с цветом на новый уровень.
4. Текст в CSS — Ваш путь постижения оформления HTML-элементов с помощью CSS начинается здесь.
5. Документация Font Awesome — Встреча Font Awesome и Angular: искромётный дуэт SVG и JS.
6. Sass (SCSS) | Документация Font Awesome — Чудеса SASS для тех, кто хочет помочь себе в сфере цветового решения в Font Awesome.