amazeui学习笔记–css（常用组件6）–图标Icon

一、总结

1、关注用法即可：在 HTML 上添加添加 am-icon-{图标名称} class。 <span class="am-icon-weixin"> Wechat</span>

2、图标大小：

• .am-icon-sm，放大 150%
• .am-icon-md，放大 200%
• .am-icon-lg，放大 250%

3、icon button：在 Icon 上添加 .am-icon-btn class。  <a href="##" class="am-icon-btn am-icon-twitter"></a>

4、旋转动画：注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才会应用旋转动画。 <i class="am-icon-spinner am-icon-spin"></i>

5、固定宽度（非常有用）：FontAwesome 在绘制图标的时候不同图标宽度有差异， 添加 .am-icon-fw 将图标设置为固定的宽度，解决宽度不一致问题（v2.3 新增）。 <li><i class="am-icon-qq am-icon-fw"></i> QQ</li>

6、图标不支持的情况可以直接写编码形式：<span>&#xf09b; What a fuck.</span>

二、图标Icon

Icon

Amaze UI Icon 组件目前使用了 Font Awesome（Amaze UI 2.2.0 中升级至 4.3.0），涵盖除部分国内社交网站图标以外的其他常见图标。

使用方法

添加 Class

在 HTML 上添加添加 am-icon-{图标名称} class。

<span class="am-icon-qq"> QQ</span>
<span class="am-icon-weixin"> Wechat</span>

使用 Mixin

LESS 用户可以调用 mixin 编写样式：

1. 在要设置 Icon 的元素里调用 .am-icon-font mixin 设置字体；
2. 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 中已经替换为本地文件。

• 使用 LESS： 通过设置变量 @fa-font-path 覆盖默认的值，如 @fa-font-path: "../fonts";。这个变量定义在 icon.less 里。
• 直接使用 CSS： 查找替换 //dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/。

图标大小

• .am-icon-sm，放大 150%
• .am-icon-md，放大 200%
• .am-icon-lg，放大 250%

<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 button

在 Icon 上添加 .am-icon-btn 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;
}

存在问题

关于部分奇葩用户代理不显示字体图标

2016.07.11 update:

经网友测试研究，某些安卓手机（如酷派某些型号）不显示字体图标，原因出在 @font-face 中引入了 svg 格式的字体，这些机型解析时出错，即便包含其他格式的字体，也无法正确显示。

解决方法是删除 svg 格式字体的引用，svg 格式提供给 iOS Safari 4.1- 使用，删除并无负面影响。Amaze UI 2.7.1 中已经做删除处理。

以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font，原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码，详情参考 Iconfont 在移动端遇到问题的探讨，可以通过这个页面进行测试。

解决方式有两种：

• 将 Icon Font 编码限制在 4 位：Amaze UI 直接使用 Font Awesome，不可能去调整近 500 个图标的编码。
• 将 Icon Font 的编码直接以内容的形式写进 HTML。

<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;
}

所有图标列表