Як стилізувати колір, розмір і тінь значків шрифтів Awesome


358

Як я міг стилювати колір, розмір та тінь піктограм із значків шрифту Awesome ?

Наприклад, на сайті Font Awesome будуть показані деякі піктограми білого кольору, а деякі червоного кольору, але не буде показано, CSSяк їх стилювати таким чином ...

Кнопки та посилання різних кольорів із червоними, білими та чорними значками поруч

Відповіді:


466

Зважаючи на те, що вони просто шрифти, ви повинні мати можливість їх стилізувати як шрифти:

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

4
@David Thomas: Це хороше рішення. Дякую, що ви написали це. Однак я ВЖЕ збентежений, чому шрифт-приголомшливий іноді показує піктограми білого, а іноді чорного. ЩО ТАКОЖ ТРИК? Як зазначає GirlCanCode2, приклади на веб-сайті FA показують чорно-білі значки та текст. . . оглядаючи елементи в Firebug, однак, CSS для конкретних піктограм (наприклад, інформація про піктограму) отримує [over], написану білим кольором. Це насправді те, що ми маємо робити? Немає білого значка, як у bootstrap.css?
Туз

1
щоб змінити колір, перевірте це в ТАК, сподівайтеся, хтось допоможе
shaijut

@Ace Я знаю, що це давнє, і ви, можливо, дізналися про це вже зараз, але для інших, у яких є питання, про яке ви могли б розглянути конкретність тут, а також тут . Інша річ, яку потрібно знати, це каскад CSS; наприклад, замість цього застосовуються таблиці стилів та таблиць стилів, які застосовуються після інших, якщо вибірки правил стилю не є менш конкретними (як за специфікою). Отже, моя улюблена практика - це якнайменше визначити специфіку відповідності та викласти стиль після переосмислення.
Іван

158

Ви також можете просто додати стиль вбудованого стилю:

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

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

7
Незважаючи на елітарні голоси вниз, ця відповідь працює чудово. Оскільки шрифт awesome - це шрифт, він відповідає стилям та класам, які впливають на текст.
AaronLS

16
@NightOwl Також найкраща практика використовувати мінімізацію, згрупування та кешування цих ресурсів. Жоден із відповідей тут не демонструє жодної з цих речей, а для спроб і втілення кращих практик слід дотримуватися в контексті ізольованої відповіді - елітарний ІМО. Кожен, хто розуміє CSS, повинен мати можливість прийняти цей стиль і перенести його в клас CSS.
AaronLS

4
@NightOwl Навіть відповідь на найвищий рівень голосування є досить жахливою з точки зору найкращих практик. Не слід створювати стилі у спільних CSS-файлах, на які посилаються елементи #id, оскільки лише один елемент зможе підписатися на цей стиль на кожній сторінці. Якби я відмовився від цієї причини, я б не був досить елітарним? Обидва відповідачі доклали максимум зусиль, щоб надати запитувачу корисну інформацію, і я не думаю, що їх слід прихиляти, коли їх відповідь дійсно є ефективною.
AaronLS

31
Якщо хтось хоче доповнити відповідь коментарем, який вказує, що, як правило, найкраща практика не використовувати вбудовані стилі, то це було б доречно. Ефективну та інформативну відповідь не слід сприймати над такими дрібницями, коли хтось міг би просто покращити існуюче значення відповіді, додавши коментар.
AaronLS

1
Для мене немає сенсу розміщувати просту директиву css color у своєму класі та поєднувати її зі своїми активами css. Що ти робитимеш? class='icon-ok-sign my-red-class'? або class='icon-ok-sign-red'? Це робить його менш читабельним та додає марного рівня складності.
Нуреттін

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
Це може не вимагати завантажувального завантаження, але саме так я знайшов це питання. Спасибі Ельги!
Will Lovett

1
З екрана екрана видно, що вони вже використовують завантажувальну систему. Було б сенс продовжувати використовувати його для підтримки тієї ж палітри кольорів і не дублювання коду.
Саймон Луїк

тонкий, але важливий: текст-успіх - це колір тексту, а не колір обличчя кнопки для btn-успіху. Тож якщо ви хочете, щоб піктограма виглядала як "плоска кнопка", то успіх тексту буде дещо іншим. Я вважаю, що це є найбільш очевидним у текстовому попередженні, оскільки це потворно жовтий на відміну від дуже помітного помаранчевого
Джош Петтіт

44

Схоже, колір піктограми FontAwesome реагує на текстову інформацію, текстову помилку тощо.

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

8
Для Bootstrap, <i class = "fa fa-попередження текстової небезпеки"> </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>

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, де основний колір - це клас, у моєму випадку це світло-синій відтінок. Я вважаю, що використання вбудованих стилів на Icons with Font Awesome працює добре, особливо у випадку, коли ви називаєте свої кольори семантично, тобто nav-color, якщо ви хочете окремий колір для цього тощо.

У цьому прикладі на їхньому веб-сайті, і як я написав у своєму прикладі, найновіша версія Font Awesome трохи змінила синтаксис коригування розміру. Перед тим, як це було раніше:

icon-xxlarge

де зараз мені доведеться користуватися:

icon-3x

Звичайно, все це залежить від того, яку версію Font Awesome ви встановили у своєму оточенні. Сподіваюсь, це допомагає.



7

Просто ви можете визначити клас у вашому файлі css і каскадувати його у форматі html

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

тепер запишіть у css

.green{ color:green}

6

Просто націліть приголомшливе шрифтове заздалегідь задане ім'я класу

в колишньому:

HTML

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

CSS

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


4

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



3

Загорніть тег i в p або span, тоді ви можете використовувати css клас bootstrap

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

2

Для шрифту Awesome 5 SVG- версії використовуйте

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

1

Як було зазначено, значки для приготування шрифту - це текст, отже, ви створюєте його за допомогою відповідних атрибутів CSS. Наприклад:

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

Якщо, як це буває у мене зовсім небагато, розмір піктограми зовсім не змінюється, додайте атрибут розміру шрифту "! Важливо".

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

1

Для розміру значків

І наші рамки Web Fonts + 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


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>


0

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

<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>

Тут клас - фа-сабі-соціальні ікони

Тоді у своєму css ви можете стилізувати шрифти, використовуючи ті самі правила css, якими ви б стилювали звичайний шрифт. напр

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

Це повинно скласти ваші шрифти-приголомшливі стилі

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.