首页 > 代码库 > Font Awesome矢量图标使用，主要是完全开源免费
Font Awesome矢量图标使用，主要是完全开源免费
首先分享下github地址:Font Awesome。
中文网址：Font Awesome 4.7.0 中文文档。
官网：http://fontawesome.io
如果使用网上资源地址，直接引用就可以了。
<link href=http://www.mamicode.com/"//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
如果下载资源到本地的话，需要注意一点，就是保持css文件和fonts文件相对路径保持不变。
如果矢量图没有出现的话可以修改css文件
@font-face { font-family: ‘FontAwesome‘; src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0‘); src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0‘) format(‘embedded-opentype‘), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0‘) format(‘woff2‘), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0‘) format(‘woff‘), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0‘) format(‘truetype‘), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular‘) format(‘svg‘); font-weight: normal; font-style: normal;}
修改下src的路径就可以了。
另外还要注意的是，新版本的Font Awesome 开始不支持IE7了。
下面记录下使用方法，虽然网上可以查的到，记录在这里方便查阅。
基本图标
您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。
<i class="fa fa-camera-retro"></i> fa-camera-retro
大图标
使用 fa-lg (33%递增)、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
固定宽度
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a></div>
用于列表
使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉。
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li></ul>
边框与对齐
使用 fa-border 以及 pull-right 或 pull-left 可以轻易构造出引用的特殊效果。
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>...tomorrow we will run faster, stretch out our arms farther...And then one fine morning— So we beat on, boats against thecurrent, borne back ceaselessly into the past.
动画
使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa-spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>
旋转与翻转
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
<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
组合使用
如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter on fa-square-o<br><span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i></span>fa-flag on fa-circle<br><span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span>fa-terminal on fa-square<br><span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i></span>fa-ban on fa-camera
本文参考：
http://fontawesome.dashgame.com/
http://jingyan.baidu.com/article/77b8dc7f9c5b1c6174eab605.html
Font Awesome矢量图标使用，主要是完全开源免费