参考
简介
Font Awesome是一套图标字体库和CSS框架,提供了丰富的矢量字体图标,不依赖JS,通过CSS可以控制所有图标的大小、颜色和阴影,可以Bootstrap等框架一起使用,Font Awesome中文兼容IE7+,完全免费。
官网在这里。
引入
在html的文档部分在 标签 里, 引入 font-awesome.min.css,可以将字体下载到本地,也可以使用国内的CDN来引用。
百度静态资源公共库、BootCDN都提供了Font Awesome的镜像,可以放心使用。
使用
1 使用i标签引用Font Awesome提供的各种矢量图标
<i class="fa fa-camera-retro"></i> fa-camera-retro
可以通过CSS控制图标的fong-size、color、引用等。
2 可以为i增加类fa-lg,fa-2x,fa-3x,fa-4x,fa-5x来等比付缩放图标大小,因为是矢量图标,所以不会失真
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
3 固定宽度图标:使用 fa-fw可以固定图标宽度
4 可以在列表中使用图标
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner"></i>as bullets</li>
<li><i class="fa-li fa fa-group"></i>as bullets</li>
</ul>
5 使用fa-border为图标增加边框,使用pull-right 或者 pull-left 将图标置左或置右
<i class="fa fa-group fa-3x pull-right fa-border animated"></i>
6 旋转图标:fa-spin可以使图标旋转,fa-spinner、fa-refresh,、fa-cog是几个比较适合转起来的图标
<i class="fa fa-spinner fa-3x fa-spin"></i>
<i class="fa fa-refresh fa-3x fa-spin"></i>
<i class="fa fa-cog fa-3x fa-spin"></i>
注意:旋转图标只支持IE10+
7 翻转图标,增加fa-rotate-90可以让图标旋转90°、180°和270°,fa-flip-horizontal和fa-flip-vertical可以让图标水平或垂直翻转
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
8 叠加图标:需要先给完成容器一个fa-stack和控制整体大小的class,比如fa-4x
然后在里面两个相互叠加的i标签增加fa-stack-1x或fa-stack-2x的class
<span class="fa-stack fa-2x">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>