我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
我如何从FontAwesome的图标样式的颜色,大小和阴影?
例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……
当前回答
正如已经指出的那样,字体很棒的图标是文本,因此您可以使用适当的CSS属性来设置它的样式。例如:
.fa-twitter-square {
font-size: 15px;
color: red;
}
如果像我经常遇到的那样,图标大小根本没有变化,那就添加“!”“Important”添加到字体大小属性。
.fa-twitter-square {
font-size: 15px !important;
color: red;
}
其他回答
考虑到它们只是简单的字体,那么你应该能够将它们设置为字体:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
简单地说,你可以在css文件中定义一个类,并将其级联到html文件中
<i class="fa fa-plus fa-lg green"></i>
现在用CSS写下来
.green{ color:green}
图片来源:我可以改变Font Awesome的图标颜色吗?
(这个答案建立在那个答案的基础上)
(对于书签图标,例如:)
inyour.css文件:
.icon-bookmark.icon-white {
color: white;
}
inyour.html文件:
<div class="icon-bookmark icon-white"></div>
有一个非常简单的方法来改变字体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>
您可以根据自己的喜好更改十六进制代码。 注意:文本颜色也会改变图标的颜色,除非在i标签中有style="color:#00cc6a"。
动态更改.fa-xxx图标的css属性:
<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>