Як я міг стилювати колір, розмір та тінь піктограм із значків шрифту Awesome ?
Наприклад, на сайті Font Awesome будуть показані деякі піктограми білого кольору, а деякі червоного кольору, але не буде показано, CSS
як їх стилювати таким чином ...
Як я міг стилювати колір, розмір та тінь піктограм із значків шрифту Awesome ?
Наприклад, на сайті Font Awesome будуть показані деякі піктограми білого кольору, а деякі червоного кольору, але не буде показано, CSS
як їх стилювати таким чином ...
Відповіді:
Зважаючи на те, що вони просто шрифти, ви повинні мати можливість їх стилізувати як шрифти:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
Ви також можете просто додати стиль вбудованого стилю:
<i class="icon-ok-sign" style="color:green"></i>
<i class="icon-warning-sign" style="color:red"></i>
class='icon-ok-sign my-red-class'
? або class='icon-ok-sign-red'
? Це робить його менш читабельним та додає марного рівня складності.
Якщо ви одночасно використовуєте 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>
Схоже, колір піктограми FontAwesome реагує на текстову інформацію, текстову помилку тощо.
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
Існує дійсно простий спосіб змінити колір значків 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
тезі немає знака.
Використовуючи додавання FA 4.4.0
.text-danger
color: #d9534f
до документа css, а потім за допомогою
<i class="fa fa-ban text-danger"></i>
змінює колір на червоний. Ви можете встановити свій власний для будь-якого кольору.
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;}
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 ви встановили у своєму оточенні. Сподіваюсь, це допомагає.
Просто ви можете визначити клас у вашому файлі css і каскадувати його у форматі html
<i class="fa fa-plus fa-lg green"></i>
тепер запишіть у css
.green{ color:green}
Перейдіть за посиланням 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>
У мене була така ж проблема, коли я намагався використовувати іконки безпосередньо з BootstrapCDN (найпростіший спосіб). Потім я завантажив файл CSS і скопіював його в папку CSS свого сайту, файл CSS (описаний під «простим способом» у дивовижній документації на шрифт), і все почало працювати як слід.
Кредит: Чи можу я змінити колір значка шрифту Awesome?
(ця відповідь спирається на цю відповідь)
(наприклад, для піктограми закладок :)
Файл inyour.css:
.icon-bookmark.icon-white {
color: white;
}
Файл inyour.html:
<div class="icon-bookmark icon-white"></div>
Як було зазначено, значки для приготування шрифту - це текст, отже, ви створюєте його за допомогою відповідних атрибутів CSS. Наприклад:
.fa-twitter-square {
font-size: 15px;
color: red;
}
Якщо, як це буває у мене зовсім небагато, розмір піктограми зовсім не змінюється, додайте атрибут розміру шрифту "! Важливо".
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
Для розміру значків
І наші рамки 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
Динамічно змінюйте властивості 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>
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
Я б не радив вам використовувати вбудований у приголомшливий шрифт стиль, як 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;
}
Це повинно скласти ваші шрифти-приголомшливі стилі