Font Awesome图标安装及使用方法

前言

fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 今天烽烟就来介绍下fontawesome图标的安装方法及使用方法。

Font Awesome 特性

479个图标:只需一种字体,同时拥有多个图标 无需JavaScript:Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性 解决方案:可无限放大缩小,使用和普通字体一样自由便捷,可任意缩放 完全免费:完全免费,可以用于商业用途, SIL OFL 1.1 协议 CSS可控性:通过CSS可以任意控制所有图标的大小 ,颜色,阴影。 完全兼容视网膜屏:由于fontawesome是矢量字体,可以完全兼容视网膜屏 良好兼容性:能和Bootstrap等常用UI框架一起使用,奥森(Font Awesome中文)兼容IE7+ 桌面应用:可以用于桌面应用中 兼容屏幕阅读器:不像其它字体那样, 它可以兼容屏幕阅读器。

Font Awesome图标安装及使用方法

安装

1.下载Font Awesome最新安装包。 2.在 <head> 标签 里, 引入 font-awesome.min.css.(具体路径是你的情况而定)

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

只需要这两步你就可以在主题中调用fontawesome图标了,对于使用烽烟主题的朋友可以忽略这部。

使用

引入fontawesome以后,你可以把<i>标签用在各个地方!

1.例如基本图标:复制以下代码到你的html里

<i class="fa fa-camera-retro"></i> fa-camera-retro

你可以通过css控制图标的font-size,color,阴影等

2.Larger Icons:你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or 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

如果发现图标上下有被隐藏的情况,你可以通过适当增加 line-height来解决.

3.固定宽度图标:使用 fa-fw可以固定图标宽度

<div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a> </div>

4.列表图标:使用 fa-ul and 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>

5.有边框 & 漂浮 图标: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 the
current, borne back ceaselessly into the past.

6.旋转图标:fa-spin 和 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>

只支持IE10+7.翻转图标

<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.叠加图标

<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

最后编辑于:2015/02/05作者: 烽烟无限

发表评论

  • 你现在会用了?要不要教教我•﹏•

  • hh

    为什么不给个下载的连接

    • 为什么不帮你敲完所有代码

      • hh

        我有好多版本的,有的不一样,反正现在用的是Bootstrap v3.3.5这个,是fa-,!!!!,你太气人了 T_T T_T T_T