Как я могу стилизовать цвет, размер и тень иконок от Font Awesome's Icons ?
Например, сайт Font Awesome покажет некоторые значки в белом, а некоторые в красном, но не покажет, CSS
как их стилизовать таким образом ...
Как я могу стилизовать цвет, размер и тень иконок от Font Awesome's Icons ?
Например, сайт 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, где main-color - это класс, в моем случае это голубой оттенок. Я считаю, что использование встроенных стилей на значках со шрифтом 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 (описанный в разделе «Простой способ» в потрясающей документации по шрифту), и все стало работать как надо.
Кредит: Могу ли я изменить цвет значка Font 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;
}
Если, как это часто случается со мной, размер иконки вообще не изменяется, добавьте «! Важное» в атрибут font-size.
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
Для размеров иконок
Наши веб-шрифты + 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);
Я бы не советовал вам использовать встроенный в 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;
}
Это должно получить ваши шрифты-удивительные шрифты в стиле