Font Awesome应用详解

1.1概述
        Font Awesome提供可缩放的矢量图标，可以使用CSS所提供的所有特性对其进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
        Font Awesome的缺点是：对IE6等浏览器兼容性不是很好，不过最新版本(4.2.0以后的版本)和IE7完美兼容。
1.2本地使用
1.2.1推荐地址
        下载并且提供查询功能的链接：http://fontawesome.io/icons/
1.2.2引用
1、下载完毕并解压后文件包括以下几个文件夹：
        css — 字体的引入,图标基础样式,大小等。
        fonts — css需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)。
        less — 各种参数自定义的less文件,用来自定义Font awesome。
        sass — 各种参数自定义的sass文件,用来自定义Font awesome。
        sass和less都是CSS预处理器。
2、把css文件夹和fonts文件夹复制到项目根目录下并在html文件中引文font-awesome.min.css文件即可。
注意：生产环境建议用压缩版本,非压缩版本建议学习使用。
1.2.3图标引用及设置
1、图标的引用
        Font Awesome是为使用内联元素而设计的，通常使用<i>标签，因为其更简洁。但实际上使用<span>标签才更加语义化。引用方法则是使用CSS类，类名是前缀fa，再加上图标名称。
例：

<i class="fa fa-weixin"></i>

2、图标设置
(一)规格参数
使用fa-lg (比常规图标大33%), fa-2x, fa-3x, fa-4x, or fa-5x(2X~5x都是常规图标大小的倍数)这些类等比缩放图标大小。
例：

<i class="fa fa-weixin fa-lg"></i>
<i class="fa fa-weixin fa-2x"></i>
<i class="fa fa-weixin fa-3x"></i>
<i class="fa fa-weixin fa-4x"></i>
<i class="fa fa-weixin fa-5x"></i>

(二)固定图标大小
使用fa-fw类给图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况，尤其在列表或导航时起到重要的作用。
(三)图标定位
使用pull-right(定位在右边)和pull-left(定位在左边)类可以控制图标位置,是文字环绕。
例：

<i class="fa fa-tag pull-right"><i>
<i class="fa fa-tag pull-left"><i>

(四)为图标添加边框
使用fa-border类可以给图标加一个边框。
例：

<i class="fa fa-search fa-border"><i>

(五)旋转图标
使用fa-rotate-旋转度数类来控制图标的旋转度数，使用fa-flip-参数(horizontal/vertical)类来控制图标水平和垂直。
例：

<i class="fa fa-hand-o-up"></i>
<i class="fa fa-hand-o-up fa-rotate-90 ">
<i class="fa fa-hand-o-up fa-flip-horizontal ">
<i class="fa fa-hand-o-up fa-flip-vertical "></i>

(六)图标动画
使用fa-spin和fa-pulse类给图标设置一个旋转动画。spin的速度是linear(匀速),一圈2s，pulse分为八步,一圈时间1s。
例：

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

(七)列表图标
使用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-stack类作为父级盒子组合子元素生成的对象，可以使用规格参数。使用fa-stack-2x类作为背景的栈,要大于显示图形的栈，使用fa-stack-1x类作为背景栈内部的内容,要小于背景栈。另外使用fa-inverse类来反转图标的颜色,生成可见图标组。
例1：

<span class="fa-stack fa-3x">
    <i class="fa fa-stack-1x  fa-chain"></i>
    <i class="fa fa-stack-2x  fa-circle-o "></i>
</span>

例2：

<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>

Font Awesome应用详解

猜你喜欢