我如何从FontAwesome的图标样式的颜色,大小和阴影?

例如,FontAwesome的网站将显示一些白色图标和一些红色图标,但不会显示如何样式它们的CSS……


当前回答

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

其他回答

正如已经指出的那样,字体很棒的图标是文本,因此您可以使用适当的CSS属性来设置它的样式。例如:

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

如果像我经常遇到的那样,图标大小根本没有变化,那就添加“!”“Important”添加到字体大小属性。

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

图片来源:我可以改变Font Awesome的图标颜色吗?

(这个答案建立在那个答案的基础上)

(对于书签图标,例如:)

inyour.css文件:

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

inyour.html文件:

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

动态更改.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>

尺寸: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> . 对于阴影:.fa-linkedin-square{text-shadow: 3px 6px #272634;}

调整图标大小

我们的Web Fonts + CSS和SVG + JS框架都包括一些基本的控件,用于在页面的UI上下文中调整图标的大小。

你可以用like

<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