it-swarm.com.ru

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

Как я могу стилизовать цвет, размер и тень иконок из Font Awesome's Icons ?

Например, Font Awesome's site покажет некоторые значки белым, а некоторые красным, но не будет CSS для того, как их стилизовать таким образом ...

enter image description here

310
Elias7

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

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
421
David Thomas

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

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

<i class="icon-warning-sign" style="color:red"></i>
133
dandrews

Если вы используете 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>
94
Elgs Qian Chen

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

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
42
user1695595

в вашем файле .css:

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

в вашем .html файле:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
17
gingin

Существует действительно простой способ изменить цвет значков 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>

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

10
Calum Childs

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 вы установили в своей среде. Надеюсь это поможет.

8
kinghenry14

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

.text-danger
    color: #d9534f

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

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

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

8
Steve Gutierrez

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

7
angelokh

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

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

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

.green{ color:green}
6
gdmanandamohon

Пожалуйста, обратитесь по ссылке 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>
5
Brandon Yang

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

в бывшем:

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}
4
Jonca33

Для размера: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

Для цвета: <i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i> Для тени: .fa-linkedin-square { Текстовая тень: 3px 6px # 272634; } ``

4
arif imtiaz

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

4
Thanushka

Кредит: Могу ли я изменить цвет значка Font Awesome?

(этот ответ строит на этом ответе)

(для значка закладки, например :)

файл inyour.css:

.icon-bookmark.icon-white {
    color: white;
}

файл inyour.html:

<div class="icon-bookmark icon-white"></div>
3
therobyouknow

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

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
2
czLukasss

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

<p class="text-success"><i class="fa fa-check"></i></p>
2
etlds

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

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

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

.fa-Twitter-square {
    font-size: 15px !important;
    color: red;
}
0
gmartinss

Динамически измените свойства 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>
0
yardpenalty

Я бы не советовал вам использовать встроенный в 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;

}

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

0
Lawrence Oputa
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
Dan Alboteanu