Font-Awesome使用教程

何为Font-Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)

---

优势

1. 目前图标总数共有519个;
2. 不依赖Javascript
3. 矢量图形,无限缩放
4. 免费,可用于商业
5. CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
6. 支持retina显示(苹果retina 屏幕)
7. 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
8. 兼容屏幕阅读器
9. 图标用到的animation适用于IE8~9

---

缺点

• 不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)

---

获取Font-Awesome

• 官网 — 点击Download即可下载最新版本
• Github — Font-Awesome仓库

使用方法

本地使用

下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:

• CSS — 字体的引入,图标基础样式,大小等
• fonts — CSS需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)
• less — 各种参数自定义的less文件,用来自定义Font awesome
• sass — 各种参数自定义的sass文件,用来自定义Font awesome

SASS和LESS都是CSS预处理器

把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例 
代码内含注释—应该很好理解 
建议:用Chrome F12调试,一边查看注释一边折腾更妙