css3动画页面加载_CSS3在html页面中使用Font Awesome字体图标的方法

【www.bbyears.com--css3教程】

一，什么是字体图标

（1）现在比较流行使用字体图标，所谓字体图标其实就是一个包含许多图标的字体库。同我们常用的字体一样，这个也可以理解为一种特殊字体，只不过里面包含的都是图标。
（2）既然是字体，那么最方便的就是可以随意在代码中更改颜色和大小而不会失真。这样不需要因为要适配各种尺寸而制作多个图片，或者做多套颜色的图标用来标识不同状态。
（3）无论是按钮图标还是导航栏图标，也不管是网站开发还是移动应用开发，字体图标都能适用。
（比如下面几个就可以使用字体图标实现，像 111cn.net 右侧导航栏上的小图标用的也是字体图标）

二，Font Awesome 图标字体库
Font Awesome 是一套目前最受欢迎最全面的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标和社交网络图标、Web 应用程序图标和编辑器图标等等。

网站地址：官网地址  GitHub地址

主要特色如下：

✓ 一种字体，包含605个图标（截至4.5.0版本）；
✓ 纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
✓ 无限缩放，矢量图标在任何尺寸下都一模一样；
✓ 免费使用，包括商业和非商业项目；
✓ 支持 Internet Explorer 7 浏览器；
✓ 能够在 Retina 屏幕完美呈现；
✓ 简单，易用；
✓ 对设计师友好，设计师能够轻松使用；
✓ 和其它图标字体不同，兼容屏幕阅读器；

下面只是字体库中一小部分图标（点击此处查看全部）：

三，Font Awesome的配置
（1）首先将整个字体库文件夹 font-awesome 放到工程项目中。
（2）在html页面的头部把 font-awesome.min.css 引进来。
1

四，Font Awesome的使用样例
在页面中的任何地方都可以使用 标签来使用Font Awesome字体图标。

  List icons
  can be used
  as bullets
  in lists


5，有边框且漂浮的图标

使用 fa-border 与 fa-pull-right 或者 fa-pull-left 组合使用，可以很方便地实现引用或文章图标。


...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-pulse 可以让图标只按8个角度旋转。







（注意：如果是IE浏览器，只支持 IE10 以及以上版本的IE）

7，旋转、翻转图标

使用 fa-rotate-* 和 fa-flip-* 可以分别实现图标的旋转和翻转。

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

8，叠加图标

要叠加多个图标，使用 fa-stack 设置容器。fa-stack-1x 表示正常大小的图标，fa-stack-2x 表示更大的图标。 fa-inverse 可以让图标反色。



 
 

fa-twitter on fa-square-o


 
 

fa-flag on fa-circle


 
 

fa-terminal on fa-square


 
 


 

本文来源：http://www.bbyears.com/css/96332.html