<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" 用法例子： 
|