Icon

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

使用方法

添加 Class

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

QQ Wechat

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

使用 Mixin

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

在要设置 Icon 的元素里调用 .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;
}
}

图标大小

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

在 Icon 上添加 .am-btn-icon class。

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

旋转动画

注意：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>

复制图标

鼠标移到图标上会显示两个小按钮：

class: 复制 class 名称，用于可修改 DOM 结构的场景，如点击 copy 图标旁的 class 按钮复制结果为 am-icon-copy；
style: 复制 Icon 样式，用于无法修改 DOM 结构通过样式添加 Icon 的场景，如点击 copy 图标旁的 style 按钮复制结果为

{
.am-icon-font;
content: @fa-var-copy;
}

所有图标列表

Web Application Icons

File Type Icons

Spinner Icons

These icons work great with the am-icon-spin class. Check out the spinning icons example.

Form Control Icons

Payment Icons

Chart Icons

Text Editor Icons

Video Player Icons

Brand Icons

All brand icons are trademarks of their respective owners.
The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.

Amaze UI

CSS

目录