Как стилизовать цвет значка, размер и тень Font Awesome Icons

Ответы:

467

Учитывая, что они просто шрифты, вы должны иметь возможность стилизовать их как шрифты:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
Дэвид говорит восстановить Монику
источник
4
@ Дэвид Томас: Это хорошее решение. Спасибо за публикацию этого. Тем не менее, я по-прежнему озадачен, почему удивительный шрифт иногда показывает значки в белом, а иногда в черном. Что такое пометка? Как указала GirlCanCode2, примеры на веб-сайте FA показывают как черно-белые значки, так и текст. , , Однако, изучая элементы в Firebug, CSS для определенных значков (например, icon-info) переписывается белым цветом. Это действительно то, что мы должны сделать? Нет значка белого цвета, как в bootstrap.css?
Ace
1
для изменения цвета, проверьте это в SO, надеюсь, кто-то помогает
shaijut
@ Раз уж я знаю, что это старо, и вы, возможно, уже узнали это, но и для других, у которых есть вопрос, который вы могли бы рассмотреть здесь, и также здесь . Другая вещь, которую нужно знать, это каскад CSS; например, вместо этого применяются стили и таблицы стилей, которые следуют после других, если их селекторы правил стиля не являются менее конкретными (как в специфичности). Итак, моя любимая практика - как минимум указывать соответствие и ставить стиль после переопределения.
Джон
158

Вы также можете просто добавить встроенный стиль:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
dandrews
источник
7
Несмотря на отрицательное голосование элиты, этот ответ работает просто отлично. Поскольку шрифт awesome - это шрифт, он реагирует на стили и классы, влияющие на текст.
AaronLS
16
@NightOwl Также рекомендуется использовать минимизацию, пакетирование и кэширование этих ресурсов. Ни один из ответов здесь не демонстрирует ни одной из этих вещей, и попытка применения передовых методов в контексте единичного ответа является элитарной ИМО. Любой, кто понимает CSS, должен иметь возможность использовать этот стиль и переместить его в класс CSS.
AaronLS
4
@NightOwl Даже самый высоко оцененный ответ довольно ужасен с точки зрения лучших практик. Не следует создавать стили в общих CSS-файлах, которые ссылаются на элементы с помощью #id, поскольку только один элемент сможет подписаться на этот стиль на каждой странице. Если бы я отказался от этого по этой причине, разве я не был бы довольно элитарным? Оба ответчика приложили эффективные усилия для предоставления полезной информации спрашивающему, и я не думаю, что их следует опускать, когда их ответ действительно эффективен.
AaronLS
31
Если кто - то хочет Suppliment ответ с комментарием , что указывает на то , как правило , лучше практика , чтобы не использовать встроенные стили, то это было бы уместно. Эффективный и информативный ответ не должен быть опущен из-за таких мелочей, когда кто-то мог просто улучшить существующее значение ответа, добавив комментарий.
AaronLS
1
Для меня нет смысла помещать простую цветовую директиву CSS в ее собственный класс и связывать ее с вашими CSS-активами. Что ты бы сделал? class='icon-ok-sign my-red-class'? или class='icon-ok-sign-red'? Это делает его менее читаемым и добавляет бесполезный уровень сложности.
nurettin
114

Если вы используете Bootstrap одновременно, вы можете использовать:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

В противном случае:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
Цянь Чен
источник
1
Конечно, решение вопроса не предполагает использование начальной загрузки
JG Estiot
1
Это может не потребовать начальной загрузки, но вот как я нашел этот вопрос. Спасибо, Элгс!
Уилл Ловетт
1
Вы можете видеть на скриншоте, что они уже используют загрузчик. Было бы целесообразно продолжать использовать его, чтобы поддерживать ту же цветовую палитру, а не дублировать код.
Симон Луйк
тонко, но важно: текст-успех - это цвет текста, а не цвет лица кнопки для btn-успеха. Так что если вы хотите, чтобы значок выглядел как «плоская кнопка», то успех текста будет немного другим. Я нахожу это наиболее очевидным в текстовом предупреждении, так как это уродливый желтый, в отличие от очень заметного оранжевого
Джош Петитт
44

Похоже, цвет значка FontAwesome реагирует на текстовую информацию, текстовую ошибку и т. Д.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
user1695595
источник
8
Для Bootstrap: <i class = "fa fa-warning text-danger"> </ i>
Mastro
Это, вероятно, лучший ответ на этой странице, по крайней мере для меня, поскольку я уже использую Bootstrap, и это соответствует этой парадигме.
Джейк Торонто
17

файл inyour.css:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

файл inyour.html:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
Gingin
источник
13

Существует действительно простой способ изменить цвет значков Font Awesome. 

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
Развернуть фрагмент

Вы можете изменить шестнадцатеричный код по своему усмотрению. ПРИМЕЧАНИЕ. Цвет текста также изменит цвет значка, если только style="color:#00cc6a"внутри iтега нет.

Калум Чайлдс
источник
9

Использование добавления FA 4.4.0

.text-danger
    color: #d9534f

к документу CSS, а затем с помощью 

 <i class="fa fa-ban text-danger"></i>

меняет цвет на красный. Вы можете установить свой собственный для любого цвета.

Стив Гутьеррес
источник
9 
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
Ариф Имтиаз
источник
8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

Здесь я определил глобальный стиль в своем CSS, где main-color - это класс, в моем случае это голубой оттенок. Я считаю, что использование встроенных стилей на значках со шрифтом Awesome работает хорошо, особенно в случае, когда вы называете свои цвета семантически, например, nav-color, если вы хотите отдельный цвет для этого и т. Д.

В этом примере на их веб-сайте, а также в том, как я написал в своем примере, новейшая версия Font Awesome немного изменила синтаксис настройки размера. Раньше это было:

icon-xxlarge

где теперь я должен использовать:

icon-3x

Конечно, все зависит от того, какую версию Font Awesome вы установили в своей среде. Надеюсь это поможет.

kinghenry14
источник
7

В FontAwesome 4.0 классы меняются на «fa-2x», «fa-3x».

angelokh
источник
7

Просто вы можете определить класс в вашем CSS-файле и перевести его в HTML-файл, например: 

<i class="fa fa-plus fa-lg green"></i>

сейчас запишите в css 

.green{ color:green}
gdmanandamohon
источник
6

Просто наведите шрифт - потрясающее предопределенное имя класса

в бывшем:

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
Jonca33
источник
5

Пожалуйста, обратитесь по ссылке http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Брэндон Ян
источник
4

У меня была такая же проблема, когда я пытался использовать иконки прямо из BootstrapCDN (самый простой способ). Затем я скачал файл CSS и скопировал его в папку CSS моего сайта - файл CSS (описанный в разделе «Простой способ» в потрясающей документации по шрифту), и все стало работать как надо.

Thanushka
источник
3

Оберните тег i в p или span, тогда вы можете использовать класс начальной загрузки css

<p class="text-success"><i class="fa fa-check"></i></p>
etlds
источник
2

Для версии Font Awesome 5 SVG используйте

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
czLukasss
источник
1

Как уже указывалось, иконки шрифтов - это текст, поэтому вы стилизуете его с помощью соответствующих атрибутов CSS. Например:

.fa-twitter-square {
    font-size: 15px;
    color: red;
}

Если, как это часто случается со мной, размер иконки вообще не изменяется, добавьте «! Важное» в атрибут font-size.

.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}
gmartinss
источник
1

Для размеров иконок

Наши веб-шрифты + CSS и SVG + JS включают некоторые базовые элементы управления для определения размера значков в контексте пользовательского интерфейса вашей страницы.

вы можете использовать как

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

TarangP
источник
0

Динамически измените свойства CSS значков .fa-xxx:

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
yardpenalty.com
источник
0 
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Дан Алботяну
источник
0

Я бы не советовал вам использовать встроенный в font-awesome стиль, такой как fa-5x и т. Д .; из-за страха, что они могут изменить его, и вам придется следить за кодом своего приложения, чтобы соответствовать последнему стандарту. Вы просто избегаете этого, давая каждому классу font-awesome, который хотите создать одинаковый стиль, один и тот же класс:

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

Здесь класс fa-sabi-social-icons

Затем в вашем CSS вы можете стилизовать шрифты, используя те же правила CSS, что и в обычном шрифте. например

.fa-sabi-social-icons {
     color: //your color;
     font-size: // your font-size in px, em or %;
     text-shadow: 2px 2px #FF0000;
}

Это должно получить ваши шрифты-удивительные шрифты в стиле

kboul
источник