Как стиль значок цвет, размер и тень шрифта удивительные иконки

Question

Как стиль значок цвет, размер и тень шрифта удивительные иконки

Как я могу стиль цвета, размера и тени иконок из шрифта Awesome в иконы?

например, шрифт Awesome в сайт покажет некоторые значки в белом и некоторые в красном, но не покажет CSS о том, как стиль их таким образом ...

21 296

css twitter-bootstrap styles icons font-awesome-4.0.0

21 ответ:

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

117

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

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

82

похоже, что цвет значка FontAwesome реагирует на текстовую информацию, текстовую ошибку и т. д.
<div style="font-size: 44px;">
 
</div>

41

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>

17

существует очень простой способ изменить цвет шрифта удивительных иконок.

<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>






вы можете изменить код по своему усмотрению. Примечание: цвет текста также изменит цвет значка, если нет style="color:#00cc6a" внутри i тег.

10

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

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

В этом примере на их сайте, и как я написал в моем примере, а также, самая новая версия шрифта Awesome немного изменила синтаксис регулировки размера.Раньше это было:
icon-xxlarge
где теперь я должен использовать:
icon-3x
конечно, все это зависит от того, какую версию Font Awesome вы установили в своей среде. Надеюсь, это поможет.

8

использование FA 4.4.0 добавление
.text-danger
 color: #d9534f
в документ css, а затем с помощью
 
меняет цвет на красный. Вы можете установить свой собственный для любого цвета.

8

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

7

просто вы можете определить класс в своем css-файле и каскадировать его в html-файл, например
 
теперь запишите в css
.green{ color:green}

6

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

У меня была та же проблема, когда я пытался использовать значки непосредственно из BootstrapCDN (самый простой способ). Затем я загрузил файл CSS и скопировал его в папку CSS моего сайта файл CSS (описанный в разделе "простой способ" в Font awesome documentation), и все начало работать так, как должно.

4

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

(ответ строит на что ответить)

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

inyour.css файл:
.icon-bookmark.icon-white {
 color: white;
}
inyour.HTML-файл:
<div class="icon-bookmark icon-white"></div>

3

просто целевой шрифт-удивительное предопределенное имя класса

в ex:

HTML
 
CSS
i.fa {
 color: red;
 font-size: 30px;
}

3

оберните тег i в p или span, затем вы можете использовать bootstrap css class

2

на шрифт Awesome 5 SVG версия, используйте
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));

2

динамически изменять свойства 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

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

0

Как уже отмечалось, шрифтовые значки awesome-это текст, поэтому вы стилизуете его с помощью соответствующих атрибутов CSS. Например:
.fa-twitter-square {
    font-size: 15px;
    color: red;
}
Если, как это происходит совсем немного для меня, размер значка не меняется вообще, добавить "!важно " для атрибута размер шрифта.
.fa-twitter-square {
    font-size: 15px !important;
    color: red;
}

0

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



здесь класс 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

для размера : Альфа-ЛГ альфа-2 раза, Англии-в 3 раза, Англии-4 раза, Альфа-5х.

Цвета :  Для Тени : .fa-linkedin-square{ текст-тень: 3px 6px #272634; }"

0

David Thomas · Accepted Answer · 2012-09-05 01:50:45

учитывая, что они просто шрифты, то вы должны быть в состоянии стилизовать их как шрифты:
#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}