html 通用ui css图标,CSS - Icon | Amaze UI

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.

QQ Wechat

QQ

Wechat

Use Mixin

LESS Users can add icons using mixin:Use .am-icon-font in the element to set the font;

Set content to be the variable of the icon you want to use, like content: @fa-var-{icon name}。

Weibo

Weibo

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

Default Size

.am-icon-sm

.am-icon-md

.am-icon-lg

Default Size

.am-icon-sm

.am-icon-md

.am-icon-lg

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

Spinning

Attention: In Chrome and Firefox, spinning animation can be applied only to elements with display: inline-block; or display: block;.

v2.3 New Animation：

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)

QQ

Skype

GitHub

Amex

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.

 What a fuck.

 What a fuck.

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