在微信上关注我们
Amaze UI Icon 组件目前使用了 Font Awesome（Amaze UI 2.2.0 中升级至 4.3.0），涵盖除部分国内社交网站图标以外的其他常见图标。
在 HTML 上添加添加 am-icon-{图标名称} class。
<span class="am-icon-qq"> QQ</span>
<span class="am-icon-weixin"> Wechat</span>LESS 用户可以调用 mixin 编写样式：
.am-icon-font mixin 设置字体；content 设置为 Icon 名称对应的变量 content: @fa-var-{图标名称}。<span class="doc-icon-custom"> 新浪微博</span>.doc-icon-custom {
&:before {
.am-icon-font;
content: @fa-var-weibo;
}
}字体图标目前引了 Staticfile CDN 上的文件（支持 HTTPS），可以自行替换：编译好的 CSS 中已经替换为本地文件。
@fa-font-path 覆盖默认的值，如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。//dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/。.am-icon-sm，放大 150%.am-icon-md，放大 200%.am-icon-lg，放大 250%默认大小
.am-icon-sm
.am-icon-md
.am-icon-lg
<p><span class="am-icon-home"></span> 默认大小</p>
<p><span class="am-icon-home am-icon-sm"></span> .am-icon-sm</p>
<p><span class="am-icon-home am-icon-md"></span> .am-icon-md</p>
<p><span class="am-icon-home am-icon-lg"></span> .am-icon-lg</p>在 Icon 上添加 .am-btn-icon class。
如果需要设置 Icon Button 的颜色，可以添加以下 class：
.am-primary.am-secondary.am-success.am-warning.am-danger<a href="##" class="am-icon-btn am-icon-twitter"></a>
<a href="##" class="am-icon-btn am-icon-facebook"></a>
<a href="##" class="am-icon-btn am-icon-github"></a>
<a href="##" class="am-icon-btn am-primary am-icon-qq"></a>
<a href="##" class="am-icon-btn am-secondary am-icon-drupal"></a>
<a href="##" class="am-icon-btn am-success am-icon-shield"></a>
<a href="##" class="am-icon-btn am-warning am-icon-warning"></a>
<a href="##" class="am-icon-btn am-danger am-icon-youtube"></a>注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才会应用旋转动画。
<i class="am-icon-spinner am-icon-spin"></i>
<i class="am-icon-refresh am-icon-spin"></i>
<i class="am-icon-circle-o-notch am-icon-spin"></i>
<i class="am-icon-cog am-icon-spin"></i>
<i class="am-icon-gear am-icon-spin"></i>v2.3 新增动画：
<i class="am-icon-spinner am-icon-pulse"></i>FontAwesome 在绘制图标的时候不同图标宽度有差异， 添加 .am-icon-fw 将图标设置为固定的宽度，解决宽度不一致问题（v2.3 新增）。
<ul>
<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>
<li><i class="am-icon-skype am-icon-fw"></i> Skype</li>
<li><i class="am-icon-github am-icon-fw"></i> GitHub</li>
<li><i class="am-icon-cc-amex am-icon-fw"></i> Amex</li>
</ul>鼠标移到图标上会显示两个小按钮：
class: 复制 class 名称，用于可修改 DOM 结构的场景，如点击 copy 图标旁的 class 按钮复制结果为 am-icon-copy；style: 复制 Icon 样式，用于无法修改 DOM 结构通过样式添加 Icon 的场景，如点击 copy 图标旁的 style 按钮复制结果为{
.am-icon-font;
content: @fa-var-copy;
}以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font，原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码，详情参考 Iconfont 在移动端遇到问题的探讨，可以通过这个页面进行测试。
解决方式有两种：
<span> What a fuck.</span>Amaze UI 的定位是面向现代浏览器，虽然对 IE 8/9 这些浏览器提供了有限支持，但这都是在不改变基础架构、不耗费过多精力的前提下。安卓碎片化严重，更恶心的是一些厂商还随意修改浏览器内核，Amaze UI 不可能做到全部兼容，也不可能为极个别的用户代理调整架构、耗费过多精力。
云适配内部有数千个网站在使用 Amaze UI，截止目前还没有接到过图标不显示的反馈。显然，遇到这些问题的用户需要权衡处理这个问题的成本与收益。
v2.3 update:
有用户在评论中说以下写法可以解决图标不显示的问题，v2.3 中已经调整为以下写法，遇到过问题的用户可以测试一下。
/* 安卓手机端Icon不能正确显示的处理办法：*/
[class*='am-icon-']:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}am-icon-spin class. Check out the spinning icons example.