FontAwesome-基本样式-1.1

上次我们了解了基础用法。现在我们接着看吧。

大小

他们提供了好多种型号的。我们可以来看看。

fa-xs(.75em) fa-sm(.875em) 什么也加 fa-lg(1.33em) fa-2x(2em) fa-3x(3em)

fa-4x(4em) fa-5x(5em) fa-6x6(em) fa-7x(7em) fa-8x(8em) fa-9x(9em)

fa-10x(10em)

<i class="fas fa-book fa-xs"></i>
<i class="fas fa-book fa-sm"></i>
<i class="fas fa-book"></i>
<i class="fas fa-book fa-lg"></i>
<i class="fas fa-book fa-2x"></i>
<i class="fas fa-book fa-3x"></i>
<i class="fas fa-book fa-5x"></i>
<i class="fas fa-book fa-7x"></i>
<i class="fas fa-book fa-10x"></i>

弄清楚他们默认的大小比例了。这时候如果我们想要的比最大的大，或者比最小的小怎么办？大家可以看到，他们的比例是按em的。那就是如果我们给i标签的父级加个font-size。这些图标就会相对改变。

左右对齐

我们经常会有图标不是左边就是右边对齐，我们可以设置。fa-pull-right fa-pull-left。

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

边框

你还能通过fa-bolder加边框

<i class="fas fa-quote-left fa-border"></i>

居中对齐

添加一个fa-fw的class给元素，就能让图标固定宽度。这样在列表中，我们就可以对齐，看起来就整齐多了。

<i class="fas fa-candy-cane fa-fw" style="background:LightCoral"></i> Candy Cane</div>

列表

为了让列表简单一点。他们还提供列表的样式，通过给ul加fa-ul、给span加fa-li。

<ul class="fa-ul">
    <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>

形成列表的样子，而且他们也写好了一些样式。满足基本展示的作用。

旋转

有些图形需要旋转。他们也提供旋转的功能。他们提供五种旋转方式。

fa-rotate-90 fa-rotate-180 fa-rotate-270 分别顺时针旋转90° 180° 270°（注意，这个角度是写好的哦。）

fa-flip-horizontal 左右镜像旋转
fa-flip-vertical 上下镜像旋转

自动旋转

你以为只有简单的旋转？不不不，他们还提供了自动旋转，这也是精彩的地方。

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

fa-spin 可以让任何图标进行旋转，他是一种平稳的旋转。而fa-pulse 则是按照8步完成旋转，这个看起来就有点生硬了。方向都是顺时针方向，不过需要注意某些六边形旋转起来像逆时针哦。

如果要找这个合适的图形，可以去详细图标选择页的spinners分类中查找。

不过需注意，由于浏览器对文字的处理差异，所以有时候，字体旋转的时候，并不居中对齐。他们也给出了两个解决方法：

1、使用svg版本，就是通过引用js引入所有样式；

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>

2、设置display:block

.fa-spinner:before {
    content: "\f110";
    display: block;
}

堆叠图形

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-list-ul fa-stack-1x fa-inverse"></i>
</span>

给组合图形的父级加fa-stack，给外框的加fa-stack-2x，给里面的内容加fa-stack-1x。就可以按层级组合。只能两层和不层叠。

至于 fa-inverse 如果你需要白色的可以加，不要白色的，你可以自定义颜色。

目前，如果只引用css样式，可以实现这些简单功能。其实上面的很多样式，我们自己写也是能实现的。只是他既然给我们装好了轮子，我们能用就用用吧，没必要再组装起轮子。虽然他的轮子看起来有点简单，并且有时候不那么贴合我们的需求。但毕竟是原装的。。。

【嗯，我是这样安慰自己的，不然上面的一些样式，我好想自己写。强迫症啊，看到几行代码能完事的，偏要写好几个class。好难受啊。】

参考：

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons