# CSS

浏览器默认样式统一，基础样式，网格，表格、表单、按钮及常用组件样式。

# Icon

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

## 使用方法

### 添加 Class

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

Copy
QQ Wechat

    <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-{图标名称}`。

Copy
新浪微博

    <span class="doc-icon-custom"> 新浪微博</span>

Copy

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

## 图标大小

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

Copy

默认大小

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

Copy

    <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;` 的元素才会应用旋转动画。

Copy

    <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` 按钮复制结果为

Copy

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

## 所有图标列表

## 40 New Icons in 4.2

- angellist class style
- area-chart class style
- at class style
- bell-slash class style
- bell-slash-o class style
- bicycle class style
- binoculars class style
- birthday-cake class style
- bus class style
- calculator class style
- cc class style
- cc-amex class style
- cc-discover class style
- cc-mastercard class style
- cc-paypal class style
- cc-stripe class style
- cc-visa class style
- copyright class style
- eyedropper class style
- futbol-o class style
- google-wallet class style
- ils class style
- ioxhost class style
- lastfm class style
- lastfm-square class style
- line-chart class style
- meanpath class style
- newspaper-o class style
- paint-brush class style
- paypal class style
- pie-chart class style
- plug class style
- shekel (alias)class style
- sheqel (alias)class style
- slideshare class style
- soccer-ball-o (alias)class style
- toggle-off class style
- toggle-on class style
- trash class style
- tty class style
- twitch class style
- wifi class style
- yelp class style

## Web Application Icons

- adjust class style
- anchor class style
- archive class style
- area-chart class style
- arrows class style
- arrows-h class style
- arrows-v class style
- asterisk class style
- at class style
- automobile (alias)class style
- ban class style
- bank (alias)class style
- bar-chart class style
- bar-chart-o (alias)class style
- barcode class style
- bars class style
- beer class style
- bell class style
- bell-o class style
- bell-slash class style
- bell-slash-o class style
- bicycle class style
- binoculars class style
- birthday-cake class style
- bolt class style
- bomb class style
- book class style
- bookmark class style
- bookmark-o class style
- briefcase class style
- bug class style
- building class style
- building-o class style
- bullhorn class style
- bullseye class style
- bus class style
- cab (alias)class style
- calculator class style
- calendar class style
- calendar-o class style
- camera class style
- camera-retro class style
- car class style
- caret-square-o-down class style
- caret-square-o-left class style
- caret-square-o-right class style
- caret-square-o-up class style
- cc class style
- certificate class style
- check class style
- check-circle class style
- check-circle-o class style
- check-square class style
- check-square-o class style
- child class style
- circle class style
- circle-o class style
- circle-o-notch class style
- circle-thin class style
- clock-o class style
- close (alias)class style
- cloud class style
- cloud-download class style
- cloud-upload class style
- code class style
- code-fork class style
- coffee class style
- cog class style
- cogs class style
- comment class style
- comment-o class style
- comments class style
- comments-o class style
- compass class style
- copyright class style
- credit-card class style
- crop class style
- crosshairs class style
- cube class style
- cubes class style
- cutlery class style
- dashboard (alias)class style
- database class style
- desktop class style
- dot-circle-o class style
- download class style
- edit (alias)class style
- ellipsis-h class style
- ellipsis-v class style
- envelope class style
- envelope-o class style
- envelope-square class style
- eraser class style
- exchange class style
- exclamation class style
- exclamation-circle class style
- exclamation-triangle class style
- external-link class style
- external-link-square class style
- eye class style
- eye-slash class style
- eyedropper class style
- fax class style
- female class style
- fighter-jet class style
- file-archive-o class style
- file-audio-o class style
- file-code-o class style
- file-excel-o class style
- file-image-o class style
- file-movie-o (alias)class style
- file-pdf-o class style
- file-photo-o (alias)class style
- file-picture-o (alias)class style
- file-powerpoint-o class style
- file-sound-o (alias)class style
- file-video-o class style
- file-word-o class style
- file-zip-o (alias)class style
- film class style
- filter class style
- fire class style
- fire-extinguisher class style
- flag class style
- flag-checkered class style
- flag-o class style
- flash (alias)class style
- flask class style
- folder class style
- folder-o class style
- folder-open class style
- folder-open-o class style
- frown-o class style
- futbol-o class style
- gamepad class style
- gavel class style
- gear (alias)class style
- gears (alias)class style
- gift class style
- glass class style
- globe class style
- graduation-cap class style
- group (alias)class style
- hdd-o class style
- headphones class style
- heart class style
- heart-o class style
- history class style
- home class style
- image (alias)class style
- inbox class style
- info class style
- info-circle class style
- institution (alias)class style
- key class style
- keyboard-o class style
- language class style
- laptop class style
- leaf class style
- legal (alias)class style
- lemon-o class style
- level-down class style
- level-up class style
- life-bouy (alias)class style
- life-buoy (alias)class style
- life-ring class style
- life-saver (alias)class style
- lightbulb-o class style
- line-chart class style
- location-arrow class style
- lock class style
- magic class style
- magnet class style
- mail-forward (alias)class style
- mail-reply (alias)class style
- mail-reply-all (alias)class style
- male class style
- map-marker class style
- meh-o class style
- microphone class style
- microphone-slash class style
- minus class style
- minus-circle class style
- minus-square class style
- minus-square-o class style
- mobile class style
- mobile-phone (alias)class style
- money class style
- moon-o class style
- mortar-board (alias)class style
- music class style
- navicon (alias)class style
- newspaper-o class style
- paint-brush class style
- paper-plane class style
- paper-plane-o class style
- paw class style
- pencil class style
- pencil-square class style
- pencil-square-o class style
- phone class style
- phone-square class style
- photo (alias)class style
- picture-o class style
- pie-chart class style
- plane class style
- plug class style
- plus class style
- plus-circle class style
- plus-square class style
- plus-square-o class style
- power-off class style
- print class style
- puzzle-piece class style
- qrcode class style
- question class style
- question-circle class style
- quote-left class style
- quote-right class style
- random class style
- recycle class style
- refresh class style
- remove (alias)class style
- reorder (alias)class style
- reply class style
- reply-all class style
- retweet class style
- road class style
- rocket class style
- rss class style
- rss-square class style
- search class style
- search-minus class style
- search-plus class style
- send (alias)class style
- send-o (alias)class style
- share class style
- share-alt class style
- share-alt-square class style
- share-square class style
- share-square-o class style
- shield class style
- shopping-cart class style
- sign-in class style
- sign-out class style
- signal class style
- sitemap class style
- sliders class style
- smile-o class style
- soccer-ball-o (alias)class style
- sort class style
- sort-alpha-asc class style
- sort-alpha-desc class style
- sort-amount-asc class style
- sort-amount-desc class style
- sort-asc class style
- sort-desc class style
- sort-down (alias)class style
- sort-numeric-asc class style
- sort-numeric-desc class style
- sort-up (alias)class style
- space-shuttle class style
- spinner class style
- spoon class style
- square class style
- square-o class style
- star class style
- star-half class style
- star-half-empty (alias)class style
- star-half-full (alias)class style
- star-half-o class style
- star-o class style
- suitcase class style
- sun-o class style
- support (alias)class style
- tablet class style
- tachometer class style
- tag class style
- tags class style
- tasks class style
- taxi class style
- terminal class style
- thumb-tack class style
- thumbs-down class style
- thumbs-o-down class style
- thumbs-o-up class style
- thumbs-up class style
- ticket class style
- times class style
- times-circle class style
- times-circle-o class style
- tint class style
- toggle-down (alias)class style
- toggle-left (alias)class style
- toggle-off class style
- toggle-on class style
- toggle-right (alias)class style
- toggle-up (alias)class style
- trash class style
- trash-o class style
- tree class style
- trophy class style
- truck class style
- tty class style
- umbrella class style
- university class style
- unlock class style
- unlock-alt class style
- unsorted (alias)class style
- upload class style
- user class style
- users class style
- video-camera class style
- volume-down class style
- volume-off class style
- volume-up class style
- warning (alias)class style
- wheelchair class style
- wifi class style
- wrench class style

## File Type Icons

- file class style
- file-archive-o class style
- file-audio-o class style
- file-code-o class style
- file-excel-o class style
- file-image-o class style
- file-movie-o (alias)class style
- file-o class style
- file-pdf-o class style
- file-photo-o (alias)class style
- file-picture-o (alias)class style
- file-powerpoint-o class style
- file-sound-o (alias)class style
- file-text class style
- file-text-o class style
- file-video-o class style
- file-word-o class style
- file-zip-o (alias)class style

## Spinner Icons

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

- circle-o-notch class style
- cog class style
- gear (alias)class style
- refresh class style
- spinner class style

## Form Control Icons

- check-square class style
- check-square-o class style
- circle class style
- circle-o class style
- dot-circle-o class style
- minus-square class style
- minus-square-o class style
- plus-square class style
- plus-square-o class style
- square class style
- square-o class style

## Payment Icons

- cc-amex class style
- cc-discover class style
- cc-mastercard class style
- cc-paypal class style
- cc-stripe class style
- cc-visa class style
- credit-card class style
- google-wallet class style
- paypal class style

## Chart Icons

- area-chart class style
- bar-chart class style
- bar-chart-o (alias)class style
- line-chart class style
- pie-chart class style

## Currency Icons

- bitcoin (alias)class style
- btc class style
- cny (alias)class style
- dollar (alias)class style
- eur class style
- euro (alias)class style
- gbp class style
- ils class style
- inr class style
- jpy class style
- krw class style
- money class style
- rmb (alias)class style
- rouble (alias)class style
- rub class style
- ruble (alias)class style
- rupee (alias)class style
- shekel (alias)class style
- sheqel (alias)class style
- try class style
- turkish-lira (alias)class style
- usd class style
- won (alias)class style
- yen (alias)class style

## Text Editor Icons

- align-center class style
- align-justify class style
- align-left class style
- align-right class style
- bold class style
- chain (alias)class style
- chain-broken class style
- clipboard class style
- columns class style
- copy (alias)class style
- cut (alias)class style
- dedent (alias)class style
- eraser class style
- file class style
- file-o class style
- file-text class style
- file-text-o class style
- files-o class style
- floppy-o class style
- font class style
- header class style
- indent class style
- italic class style
- link class style
- list class style
- list-alt class style
- list-ol class style
- list-ul class style
- outdent class style
- paperclip class style
- paragraph class style
- paste (alias)class style
- repeat class style
- rotate-left (alias)class style
- rotate-right (alias)class style
- save (alias)class style
- scissors class style
- strikethrough class style
- subscript class style
- superscript class style
- table class style
- text-height class style
- text-width class style
- th class style
- th-large class style
- th-list class style
- underline class style
- undo class style
- unlink (alias)class style

## Directional Icons

- angle-double-down class style
- angle-double-left class style
- angle-double-right class style
- angle-double-up class style
- angle-down class style
- angle-left class style
- angle-right class style
- angle-up class style
- arrow-circle-down class style
- arrow-circle-left class style
- arrow-circle-o-down class style
- arrow-circle-o-left class style
- arrow-circle-o-right class style
- arrow-circle-o-up class style
- arrow-circle-right class style
- arrow-circle-up class style
- arrow-down class style
- arrow-left class style
- arrow-right class style
- arrow-up class style
- arrows class style
- arrows-alt class style
- arrows-h class style
- arrows-v class style
- caret-down class style
- caret-left class style
- caret-right class style
- caret-square-o-down class style
- caret-square-o-left class style
- caret-square-o-right class style
- caret-square-o-up class style
- caret-up class style
- chevron-circle-down class style
- chevron-circle-left class style
- chevron-circle-right class style
- chevron-circle-up class style
- chevron-down class style
- chevron-left class style
- chevron-right class style
- chevron-up class style
- hand-o-down class style
- hand-o-left class style
- hand-o-right class style
- hand-o-up class style
- long-arrow-down class style
- long-arrow-left class style
- long-arrow-right class style
- long-arrow-up class style
- toggle-down (alias)class style
- toggle-left (alias)class style
- toggle-right (alias)class style
- toggle-up (alias)class style

## Video Player Icons

- arrows-alt class style
- backward class style
- compress class style
- eject class style
- expand class style
- fast-backward class style
- fast-forward class style
- forward class style
- pause class style
- play class style
- play-circle class style
- play-circle-o class style
- step-backward class style
- step-forward class style
- stop class style
- youtube-play class style

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

- adn class style
- android class style
- angellist class style
- apple class style
- behance class style
- behance-square class style
- bitbucket class style
- bitbucket-square class style
- bitcoin (alias)class style
- btc class style
- cc-amex class style
- cc-discover class style
- cc-mastercard class style
- cc-paypal class style
- cc-stripe class style
- cc-visa class style
- codepen class style
- css3 class style
- delicious class style
- deviantart class style
- digg class style
- dribbble class style
- dropbox class style
- drupal class style
- empire class style
- facebook class style
- facebook-square class style
- flickr class style
- foursquare class style
- ge (alias)class style
- git class style
- git-square class style
- github class style
- github-alt class style
- github-square class style
- gittip class style
- google class style
- google-plus class style
- google-plus-square class style
- google-wallet class style
- hacker-news class style
- html5 class style
- instagram class style
- ioxhost class style
- joomla class style
- jsfiddle class style
- lastfm class style
- lastfm-square class style
- linkedin class style
- linkedin-square class style
- linux class style
- maxcdn class style
- meanpath class style
- openid class style
- pagelines class style
- paypal class style
- pied-piper class style
- pied-piper-alt class style
- pinterest class style
- pinterest-square class style
- qq class style
- ra (alias)class style
- rebel class style
- reddit class style
- reddit-square class style
- renren class style
- share-alt class style
- share-alt-square class style
- skype class style
- slack class style
- slideshare class style
- soundcloud class style
- spotify class style
- stack-exchange class style
- stack-overflow class style
- steam class style
- steam-square class style
- stumbleupon class style
- stumbleupon-circle class style
- tencent-weibo class style
- trello class style
- tumblr class style
- tumblr-square class style
- twitch class style
- twitter class style
- twitter-square class style
- vimeo-square class style
- vine class style
- vk class style
- wechat (alias)class style
- weibo class style
- weixin class style
- windows class style
- wordpress class style
- xing class style
- xing-square class style
- yahoo class style
- yelp class style
- youtube class style
- youtube-play class style
- youtube-square class style

## Medical Icons

- ambulance class style
- h-square class style
- hospital-o class style
- medkit class style
- plus-square class style
- stethoscope class style
- user-md class style
- wheelchair class style

## Issue 列表

- 部署在HTTPS服务器上，会出现不安全资源的提示 closed
- CSS: Font ICON 在部分设备中不显示 closed

侧栏导航
×
在微信上关注我们
Amaze UI 交流 Q 群：374946651