调整图标大小

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

尺寸: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;}

请参考链接 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>

inyour.css文件:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html文件:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

考虑到它们只是简单的字体，那么你应该能够将它们设置为字体:

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

在这里，我在CSS中定义了一个全局样式，其中main-color是一个类，在我的例子中，它是浅蓝色色调。我发现在图标上使用内联样式，字体很棒，特别是在你从语义上命名颜色的情况下，即navi -color，如果你想要一个单独的颜色，等等。

在他们网站上的这个例子中，以及我在我的例子中所写的，最新版本的字体Awesome稍微改变了调整大小的语法。以前是:

icon-xxlarge

现在我必须使用:

icon-3x

当然，这完全取决于你在你的环境中安装了什么版本的Font Awesome。希望这能有所帮助。