今天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標庫完成設計。
在做互動設計的時候，作為產品設計師我們常常需要用一些標準的圖標庫，通過導入現成的圖標可以極大地提高我們的設計效率。常用的圖標庫，一般提供SVG，PNG圖片，設計師下載以後可以直接用到互動設計文件中，開發同學將圖片文件放在圖標文件夾中供頁面代碼使用，例如：
免費 Esayicon付費 IconFinder
但這種古老的方式，對於前端開發人員來說並不方便。所以新一代的圖標庫，他們提供給設計師矢量圖片( SVG格式或字體格式），設計師在設計稿中記錄該圖標的名稱，並告知前端開發人員。在開發過程中，前端同學通過調用圖標庫提供的CSS樣式，並填上對應圖標的名稱，便可以快速在Web上呈現出各種精美的矢量圖標，例如：
Icomon， 可提供自定義的字體庫圖標供設計師使用阿里圖標庫 ，可提供SVG，PNG圖片供設計師使用Font Awesome，可提供標準的字體庫圖標供設計師使用
今天我們重點講述，如果規範使用Font Awesome圖標庫完成互動設計，並讓前端同學快樂地跟我們合作。
1、初識 Font Awesome
Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。官方網頁為： http://fontawesome.io
對於英文不是太好的同學可以訪問由「極風遊科技」提供的 中文頁面： http://fontawesome.dashgame.com
選擇頁面頂部的「圖標」按鈕，可以看到所有圖標的分類：
選擇」手勢「，網頁自動跳轉出到所有」手勢「圖標部分，點擊圖標最後的」複製「按鈕，可以複製到該圖標的名稱，如下紅框所示」hand-o-right」，這裡非常重要，這個名稱對於設計師之後導入圖標到Axure 或者 前端同學都非常有用。
2. 產品設計師如何使用Font Awesome
2.1 下載字體庫
由於Font Awesome圖標庫是基於字體來使用的，所以我們首先需要在官方主頁的最上面點擊」立即下載」（目前最新版為 V4.7.0）, 然後解壓壓縮包，點擊 「TrueType 字體文件」，完成字體的安裝：
2.2 在Axure 中使用 Font Awesome
網上很多網友推薦加載Font Awesome的元件庫，以此快速完成圖標的使用。但是筆者認為由於Font Awesome經常更新，而對應的Axure 元件庫很難快速更新，所以建議大家自己在官網上通過圖標的分類，快速選擇自己心儀的圖標，獲取名字以後，在圖標庫中搜索定位圖標，然後複製粘貼到Axure中使用即可。
但是由於之前的頁面只允許我們複製圖標的名字，沒法直接複製 圖標，所以我們沒法在Axure中將圖標使用。所以我們需要去到」字體庫的圖標備忘單頁面「 ( ) ，按名字搜索圖標。例如：我們之前選擇向右的手勢為 「hand-o-right」, 然後我們在CheatSheet頁面搜索（Ctrl+F）到該圖標，如下所示：http://fontawesome.io/cheatsheet/
然後我們複製紅框中的手勢圖標貼入Axure中，但是我們發現圖標沒有出現，而是一個方框：
原因是字體默認為Arial,我們切換為 Font Awesome,以後圖標正常顯示：
但是需要注意我們一定更要在該圖標的說明裡面備註圖標的名字，這樣便於前端同學開發時快速完成代碼的編寫，如下圖所示：
2.3 設計發布
但我們完成設計以後，需要將線框圖發布成HTML文件，這時候如果將文件放到一個沒有安裝過Font Awesome 字體的電腦上，字體圖標可能無法顯示，所以我們需要在發布的時候做一些手腳。
首先我們點擊頁面右上角的 發布-生成HTML文件…
為了確保以後用來查看線框圖的電腦在斷網的情況下同樣可以正常查看，我們需要採用離線字體的方式完成HTML文件的生成。如下圖所示，添加Web字體時，我們選擇@font-face，並在具體參數處填寫：
font-family: FontAwesome;
src:url(『fontawesome-webfont.ttf』) format(『truetype』);
然後將TrueType字體庫放入HTML文件所在的文件夾裡面，如下圖所示：
然後我們將整個文件夾拷給前端同學他們就可看到了，如下圖所示：
2.4 備份CheatSheet
為了確保我們無法訪問Font Awesome官網時也可以快速複製圖標貼入Axure中，我們可以將 Font Awesome 的CheatSheet 備份為PDF文件。在Chrome瀏覽器中，輸入 ，然後滑鼠右鍵選擇 列印，如下圖所示：http://fontawesome.io/cheatsheet/
注意： 如上圖紅框所示，請將目標印表機選擇為」另存為PDF「，只有這樣生成的PDF文件中的 圖標才是可以複製的。
3. 前端攻城獅如何使用Font Awesome
Font Awesome圖標使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標名稱（前端同學可以查看設計同學線框圖中的注釋）。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 ，因為它更簡潔。 但實際上使用 才能更加語義化。如下所示：
fa-hand-o-right
由於藕不是前端攻城獅，所以不敢班門弄斧了，具體可以去網站上看看用法，如下所示：
好啦，到目前為止，大家應該很清楚Font Awesome應該如何使用了吧，快去試試吧。
本文由 @邏輯畫瘋 原創發布於人人都是產品經理。未經許可，禁止轉載。