Как стиль иконок, размер и тень шрифта Awesome Icons

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

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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

Если вы одновременно используете 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>

Ответ 4

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

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

Ответ 5

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>

Ответ 6

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

Ответ 7

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

.text-danger
    color: #d9534f

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

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

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

Ответ 8

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

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

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

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

icon-xxlarge

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

icon-3x

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

Ответ 9

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

Ответ 10

Просто вы можете определить класс в вашем файле css и каскадировать его в html файл, например

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

теперь запишите в css

.green{ color:green}

Ответ 11

Для размера: 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 {text-shadow: 3px 6px # 272634; }'' } ''

Ответ 12

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

Ответ 13

Просто целевое имя шрифта, предопределенное имя класса

в:

HTML

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

CSS

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

Ответ 14

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

Ответ 15

Кредит: Можно ли изменить цвет значка значка шрифта Awesome?

(этот ответ основывается на этом ответе)

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

inyour.css файл:

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

inyour.html файл:

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

Ответ 16

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

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

Ответ 17

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

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

Ответ 18

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

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

Если, как это бывает совсем немного, размер значка совсем не изменяется, добавьте "! important" к атрибуту font-size.

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

Ответ 19

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

Ответ 20

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

Ответ 21

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

Это должно придать вашим шрифтам потрясающие стили

Ответ 22

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

Наши веб-шрифты + 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