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

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


当前回答

对于字体Awesome 5 SVG版本,使用

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

其他回答

下面是一个如何设计字体样式的例子。

.arrow i.a a { 颜色:白色!重要; 字体大小:2.2快速眼动; 透明度:3; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="arrow d-none d-md-block"> <i class="fa fa-angle-down"></i> < / div >

就是这样。

在FontAwesome 4.0中,类更改为'fa-2x', 'fa-3x'。

简单地说,你可以在css文件中定义一个类,并将其级联到html文件中

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

现在用CSS写下来

.green{ color:green}

试着简单地使用像fa-lg,fa-2x,fa-3x,fa-4x,fa-5x之类的东西来增加相对于容器的图标大小

例如:-

调整图标大小

我们的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