FontAwesome"/>
FontAwesome
上次我们了解了基础用法。现在我们接着看吧。
大小
他们提供了好多种型号的。我们可以来看看。
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=".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。好难受啊。】
参考:
更多推荐
FontAwesome
发布评论