Icon

Amaze UI Icon is using Font Awesome(Upgraded to 4.3 in Amaze UI 2.2.0), which contains almost all commonly used icons.

Usage

Adding Class

Add am-icon-{icon-name} class to HTML elements.

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

Use Mixin

LESS Users can add icons using mixin:

1. Use .am-icon-font in the element to set the font;
2. Set content to be the variable of the icon you want to use, like content: @fa-var-{icon name}。

<span class="doc-icon-custom"> Weibo</span>

.doc-icon-custom {
  &:before {
    .am-icon-font;
    content: @fa-var-weibo;
  }
}

Modify Font Path

~~We currently use font file from Staticfile CDN (suppot HTTPS), but you can use your own file; ~~The CDN has been replaced by local file in the compiled CSS.

• Using LESS: Set @fa-font-path and replace the default value. For example, set @fa-font-path: "../fonts";. This variable is defined in icon.less.
• Using CSS： Find and replace //dn-staticfile.qbox.me/font-awesome/4.2.0/fonts/。

Size

• .am-icon-sm: Scale up 150%
• .am-icon-md: Scale up 200%
• .am-icon-lg: Scale up 250%

<p><span class="am-icon-home"></span> Default Size</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

Add the .am-btn-icon class to Icon to make it an Icon button.

The color of button can be changed by add following classes:

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

Spinning

Attention: In Chrome and Firefox, spinning animation can be applied only to elements with display: inline-block; or 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 New Animation：

<i class="am-icon-spinner am-icon-pulse"></i>

Fix Height

Icons in FontAwesome are slightly different in height. Add the .am-icon-fw class to fix this problem(New feature in v2.3)

Copy Icon

Display two small buttons when mouse hover on the icon:

• class: Copy the classes' name. Used when DOM can be modified.
• style: Copy the styles, Used when DOM can't be modified.

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

Problems

Some user agents can't display icon font correctly

There are some user agents that can't correctly display Icon Font. This is probably because these user agents can't handle the 5-digit Hex coding of Icon Font in pseudo element content. You can find more information Here, and test your user agent Here.

Two Solutions:

• Use 4-digit coding：We can't do that in Amaze UI, because there are over 500 icons, but you may do it yourself.
• Directly use Icon Font's code in HTML.

<span>&#xf09b; What a fuck.</span>

Amaze UI is designed for modern browsers. Even though we provide support to IE8/9, we can't change the basic structure and spend too much energy and coffee to fully support them. If you have some problem about icons' incorrect display on some less popular browsers, we really suggest you to consider the cost and benifit of solving this problem.

v2.3 update:

A developer provided an solution to the solve the problem of icon display. In v2.3, styles for icons have been changed to this:

/* Solution of icons' incorrect display in Android:*/
[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;
}

List of All Icons