amazeui學習筆記--css（經常使用組件6）--圖標Icon

1、總結

一、關注用法便可：在 HTML 上添加添加 am-icon-{圖標名稱} class。  Wechatcss

二、圖標大小：html

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

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

四、旋轉動畫：注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素纔會應用旋轉動畫。 linux

五、固定寬度（很是有用）：FontAwesome 在繪製圖標的時候不一樣圖標寬度有差別，添加 .am-icon-fw 將圖標設置爲固定的寬度，解決寬度不一致問題（v2.3 新增）。 <li> QQ</li>android

六、圖標不支持的狀況能夠直接寫編碼形式： What a fuck.css3

2、圖標Icon

Icon

使用方法

添加 Class

在 HTML 上添加添加 am-icon-{圖標名稱} class。github

Copy

QQ Wechat

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

使用 Mixin

LESS 用戶能夠調用 mixin 編寫樣式：web

在要設置 Icon 的元素裏調用 .am-icon-font mixin 設置字體；
content 設置爲 Icon 名稱對應的變量 content: @fa-var-{圖標名稱}。

Copy

新浪微博

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

Copy

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

修改字體路徑

~~字體圖標目前引了 Staticfile CDN 上的文件（支持 HTTPS），能夠自行替換：~~編譯好的 CSS 中已經替換爲本地文件。chrome

使用 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%

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-icon-btn class。

若是須要設置 Icon Button 的顏色，能夠添加如下 class：

.am-primary
.am-secondary
.am-success
.am-warning
.am-danger

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> <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; 的元素纔會應用旋轉動畫。

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>

v2.3 新增動畫：

Copy

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

固定寬度

FontAwesome 在繪製圖標的時候不一樣圖標寬度有差別，添加 .am-icon-fw 將圖標設置爲固定的寬度，解決寬度不一致問題（v2.3 新增）。

Copy

QQ
Skype
GitHub
Amex

<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按鈕複製結果爲

Copy

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

Copy

 What a fuck.

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

Amaze UI 的定位是面向現代瀏覽器，雖然對 IE 8/9 這些瀏覽器提供了有限支持，但這都是在不改變基礎架構、不耗費過多精力的前提下。安卓碎片化嚴重，更噁心的是一些廠商還隨意修改瀏覽器內核，Amaze UI 不可能作到所有兼容，也不可能爲極個別的用戶代理調整架構、耗費過多精力。

雲適配內部有數千個網站在使用 Amaze UI，截止目前尚未接到過圖標不顯示的反饋。顯然，遇到這些問題的用戶須要權衡處理這個問題的成本與收益。

v2.3 update:

有用戶在評論中說如下寫法能夠解決圖標不顯示的問題，v2.3 中已經調整爲如下寫法，遇到過問題的用戶能夠測試一下。

Copy

/* 安卓手機端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; }

全部圖標列表

Font Awesome 4.5 新增字體（Amaze UI 2.5 中搭載）

Font Awesome 4.4 新增字體（Amaze UI 2.5 中搭載）

Font Awesome 4.3 新增字體（Amaze UI 2.2 中搭載）

40 New Icons in 4.2

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

Currency Icons

Text Editor Icons

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

amazeui學習筆記--css（經常使用組件6）--圖標Icon

amazeui學習筆記--css（經常使用組件6）--圖標Icon

1、總結

2、圖標Icon

Icon

目錄

使用方法

添加 Class

使用 Mixin

修改字體路徑

圖標大小

Icon button

旋轉動畫

固定寬度

複製圖標

存在問題

關於部分奇葩用戶代理不顯示字體圖標

全部圖標列表

Font Awesome 4.6 新增字體（Amaze UI 2.7 中搭載）

Font Awesome 4.5 新增字體（Amaze UI 2.5 中搭載）

Font Awesome 4.4 新增字體（Amaze UI 2.5 中搭載）

Font Awesome 4.3 新增字體（Amaze UI 2.2 中搭載）

40 New Icons in 4.2

Web Application Icons

File Type Icons

Spinner Icons

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Warning!

Medical Icons

Issue 列表