amazeUI的icon图标库

<button id="doc-single-toggle" type="submit" class="am-btn am-btn-primary"><span class="am-icon-floppy-o"></span>保存</button>

红框中的图片，就是amazeUI图标库中的图标。

Amaze UI Icon 组件目前使用了 Font Awesome（Amaze UI 2.2.0 中升级至 4.3.0）。

amazeUI是怎么引入 Font Awesome图片库的，为什么从工程中找不到对应的gif、.icon、png等图片。答案是：

因为这些图标不是普通图片，而是字符图片，引入字符图片（即矢量图片）的方式，如下：

http://blog.csdn.net/ke1025178479/article/details/50588965

http://jingyan.baidu.com/article/fec4bce27ac818f2608d8b4b.html

那么为什么使用字符图片（即矢量图片）呢？因为

一些小点的图标，使用图片收缩性，以及美观上并不是很理想，即点击放大之后，变得很模糊，使用字符图片（即矢量图片）就不会。因为矢量图片就等于word中的一个“字体”font（即字体，如宋体、方正小标宋简体等），无论怎么放无限大，word中的文字都是清晰如初的，不会模糊。

实现上是怎么样的呢？

还是一开始的例子。

<button id="doc-single-toggle" type="submit" class="am-btn am-btn-primary"><span class="am-icon-floppy-o"></span>保存</button>

ctrl+h工程中的css文件，找到如下：

\f0c7就是图标在引入的Font Awesome字库的编号。

css中这段代码什么意思？

.am-icon-floppy-o:before {   content: "\f0c7"; } 这是css的功能，即在class=am-icon-floppy-o的前面，加入如下内容"\f0c7" 用法例子：