這次分享的FontAwesome v5字體圖標(biāo)元件庫(kù)，是根據(jù)官方的最新版本v5.7.2整理完成的，包含了更全面的圖標(biāo)類型和豐富的圖標(biāo)數(shù)量，相信可以滿足大多數(shù)同學(xué)在原型設(shè)計(jì)中的使用需求。

FontAwesome是一款基于CSS框架的矢量字體圖標(biāo)庫(kù)，提供了豐富的圖標(biāo)類型和各類常用的精美圖標(biāo)，在前端開發(fā)和設(shè)計(jì)領(lǐng)域中都非常流行和受歡迎。FontAwesome的主要特色是支持無(wú)限縮放和矢量輸出，并且可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

由于FontAwesome字體圖標(biāo)具有輕量和友好的特性，同時(shí)非常適合在Axure原型設(shè)計(jì)中進(jìn)行應(yīng)用，可以方便的實(shí)現(xiàn)按紐或元件的交互樣式效果。

我一直強(qiáng)烈推薦在原型設(shè)計(jì)中應(yīng)用FontAwesome字體圖標(biāo)方案，目前同行中也有很多這款字體圖標(biāo)的使用愛(ài)好者。目前大家普遍使用的是FontAwesome的版本為 v4.7版，由于這個(gè)版本官方已經(jīng)在兩年多以前就停止更新了，所以已經(jīng)無(wú)法滿足新的使用需求。

這次分享的FontAwesome v5字體圖標(biāo)元件庫(kù)，是根據(jù)官方的最新版本v5.7.2整理完成的，包含了更全面的圖標(biāo)類型和豐富的圖標(biāo)數(shù)量，相信可以滿足大多數(shù)同學(xué)在原型設(shè)計(jì)中的使用需求。

首先請(qǐng)根據(jù)下面的鏈接下載FontAwesome v5 Free版的【字體文件及元件庫(kù)】文件包，下面我會(huì)詳細(xì)FontAwesome v5 Free版字體圖標(biāo)在Axure原型設(shè)計(jì)中的使用方法。

FontAwesome v5 Free版字體及元件庫(kù)下載：https://pan.baidu.com/s/1RnPZwEvpYRxd94mpmdCxew

注：包含v5 Free版字體文件及rplib元件庫(kù)，首次使用需要安裝字體。

FontAwesome v5 Free版字體圖標(biāo)方案專題：http://www.axureux.com/FontAwesome/Free.html

注：包含v5 Free版全部圖標(biāo)列表，方便查找和復(fù)制使用，后續(xù)將持續(xù)更新。

1. 安裝FontAwesome v5 Free版字體文件

首次使用FontAwesome v5 Free版字體圖標(biāo)需要在本機(jī)上安裝字體文件，在下載【字體文件及元件庫(kù)】文件包解壓縮后打開【font-awesome-free\otfs】，將目錄內(nèi)3個(gè)字體文件完成安裝。Win系統(tǒng)雙擊字體文件就會(huì)提示安裝，Mac系統(tǒng)安裝字體方法請(qǐng)自行百度。

字體安裝完成后需要重新啟動(dòng)Axure，重啟后選中字體時(shí)在字體列表中如果能看到【Fontawesome 5 Free】和【Fontawesome 5 Brands】，則代表字體已經(jīng)安裝成功。

2. 使用FontAwesome v5 Free版字體圖標(biāo)

第一種使用方法，使用字體圖標(biāo)元件庫(kù)。在【字體文件及元件庫(kù)】文件包有提供的rplib格式的元件庫(kù)文件，將元件庫(kù)文件導(dǎo)入到Axure元件庫(kù)中。

導(dǎo)入方式：在Axure軟件界面的元件庫(kù)面板中點(diǎn)擊更多圖標(biāo)，然后選擇“載入元件庫(kù)”，然后選擇已經(jīng)下載好的rplib格式的元件庫(kù)文件，這樣就完成元件庫(kù)載入了。在元件庫(kù)的選擇列表中可以切換到對(duì)應(yīng)的元件庫(kù)列表。使用時(shí)從元件庫(kù)列表中找到需要的圖標(biāo)，直接拖入到編輯界面中就可以了。

第二種使用方法，通過(guò)字體圖標(biāo)專題頁(yè)面的圖標(biāo)列表復(fù)制。在圖標(biāo)列表中找到需要的圖標(biāo)用鼠標(biāo)左鍵雙擊，然后點(diǎn)擊右擊選擇復(fù)制圖標(biāo)字符，這個(gè)操作跟在網(wǎng)頁(yè)中復(fù)制文本的操作是相同的。然后返回到Axure軟件界面中，在對(duì)應(yīng)的元件中將圖標(biāo)字符粘貼進(jìn)去。

這個(gè)時(shí)候我們看到的圖標(biāo)仍然是一個(gè)亂碼字符，我們需要選中這個(gè)亂碼字符，在字體屬性中將它的字體設(shè)置為【Fontawesome 5 Free】或【Fontawesome 5 Brands】，圖標(biāo)就能正常顯示了。

3. Axure中使用字體圖標(biāo)設(shè)置常見(jiàn)交互效果

Fontawesome字體圖標(biāo)具有跟字體一樣的特性，我們可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改，包括：大小、顏色、陰影等。設(shè)置方法跟設(shè)置字體的樣式是一致的，選中圖標(biāo)字符在字體樣式中就可以進(jìn)行設(shè)置。

除此之外，我們還可以對(duì)包含字體圖標(biāo)的元件設(shè)置選中、懸停、禁用等各種交互樣式，這也是Fontawesome字體圖標(biāo)在原型設(shè)計(jì)中最易用的特點(diǎn)，用它來(lái)制作具有交互樣式的按紐和組件會(huì)變得非常方便。

上面的演示為Axure中使用字體圖標(biāo)實(shí)現(xiàn)的按紐鼠標(biāo)懸停交互效果，如果使用的是獨(dú)立的圖標(biāo)文件實(shí)現(xiàn)這種效果是非常復(fù)雜的，而在元件中插入字體圖標(biāo)只需要簡(jiǎn)單的一步就可以完成了。

4. 如何在未安裝字體的設(shè)備上顯示字體圖標(biāo)

如果我們已經(jīng)在本機(jī)上安裝了Fontawesome字體文件，在預(yù)覽原型文件時(shí)字體圖標(biāo)都可以正常顯示。而如果輸出的原型在其它在未安裝字體文件的電腦上演示時(shí)，圖標(biāo)顯示為亂碼該如何處理？

第一種方法，在發(fā)布設(shè)置中Web字體選項(xiàng)中添加外部Web字體CSS鏈接。添加方式：發(fā)布—生成HTML文件—Web字體，勾選“包含Web字體”，點(diǎn)擊加號(hào)圖標(biāo)，設(shè)置名稱為【Font Awesome 5 Free】，將CSS鏈接地址添加到URL中，生成HTML文件即可。

FontAwesome v5 Free版字體圖標(biāo)外部Web字體CSS鏈接(官方提供)：https://use.fontawesome.com/releases/v5.7.2/css/all.css

第二種方法，在發(fā)布設(shè)置中的Web字體選項(xiàng)中添加本地Web字體CSS鏈接，使用這種方法是即使在未聯(lián)網(wǎng)狀態(tài)下圖標(biāo)也能正常顯示。在添加本地CSS鏈接前需要將【字體文件及元件庫(kù)】文件包中的【font-awesome-free】文件夾拷貝到【Axure安裝目錄\DefaultSettings\Prototype_Files\resources\】中，下面為拷貝完成后的截圖。

完成拷貝后再添加CSS鏈接，添加方式：發(fā)布—生成HTML文件—Web字體，勾選“包含Web字體”，點(diǎn)擊加號(hào)圖標(biāo)，設(shè)置名稱為【Font Awesome 5 Free】，CSS鏈接地址設(shè)置為【resources/font-awesome-free/css/all.css】，生成HTML文件即可。

5. 一個(gè)文件同時(shí)使用多個(gè)FontAwesome版本

FontAwesome字體圖標(biāo)的多個(gè)版本是可以在同一個(gè)Axure的原型文件中，使用時(shí)需要同時(shí)安裝每個(gè)版本對(duì)應(yīng)的字體文件或設(shè)置對(duì)應(yīng)的WEB字體選項(xiàng)。

例如我們?cè)谝粋€(gè)原型文件中同時(shí)使用了FontAwesome的v4.7、v5 Free、v5 Pro三個(gè)版本的字體圖標(biāo)，需要先安裝這個(gè)三個(gè)版本對(duì)應(yīng)的字體文件，然后在發(fā)布設(shè)置的Web字體設(shè)置中設(shè)置對(duì)應(yīng)名稱和CSS鏈接，v4.7設(shè)置名稱為【FontAwesome】， v5 Free設(shè)置名稱為【FontAwesome 5 Fee】，v5 Pro設(shè)置名稱為【FontAwesome 5 Pro】，對(duì)應(yīng)的CSS鏈接以對(duì)應(yīng)專題頁(yè)面或提供的CSS鏈接為準(zhǔn)。

關(guān)于多版本設(shè)置主要用于解決在同一個(gè)原型文件使用了舊的v4.7版，同時(shí)又在這個(gè)文件使用新的v5 Free或v5 Pro版的情況。由于以前的文件使用的都是4.7版，如果開始使用新的v5版本，必定會(huì)有一個(gè)過(guò)渡期。

不過(guò)，F(xiàn)ontAwesome的版本是向下兼容的，如果你創(chuàng)建的是一個(gè)新的Axure文件并開始使用v5版本，建議不要再同時(shí)使用舊版本了。另外，v5 Pro版中已經(jīng)包含了v5 Free版的全部圖標(biāo)，如果已經(jīng)使用了v5 Pro版，建議不要再同時(shí)使用v5 Free版了。

6. 字體圖標(biāo)無(wú)法正常顯示問(wèn)題說(shuō)明

首先應(yīng)檢查字體文件是否已經(jīng)正確安裝，或者安裝的字體版本是否與使用的圖標(biāo)的版本是否一致。使用FontAwesome v5 Free版字體圖標(biāo)請(qǐng)根據(jù)第1點(diǎn)中的說(shuō)明安裝Free版字體文件，用于添加外部Web字體CSS鏈接以Free版專題頁(yè)面中提供的鏈接為準(zhǔn)。

通過(guò)Free版專題頁(yè)面中的圖標(biāo)列表復(fù)制字體圖標(biāo)時(shí)，在Axure中需要設(shè)置正確的字體和圖標(biāo)類型，否則也將導(dǎo)致圖標(biāo)在預(yù)覽時(shí)無(wú)法正常顯示，具體設(shè)置方式在第2點(diǎn)中有詳細(xì)說(shuō)明。

如果遇到Axure中圖標(biāo)可以正常顯示，但是在預(yù)覽時(shí)卻是亂碼的現(xiàn)象，一般是由于修改了頁(yè)面的樣式里面的“字體系列”選項(xiàng)導(dǎo)致的。這個(gè)字體系列的選項(xiàng)默認(rèn)的是【Applied Font】，請(qǐng)不要去修改它，否則會(huì)覆蓋頁(yè)面中所有的字體屬性設(shè)置而導(dǎo)致字體圖標(biāo)失效。

7. 關(guān)于圖標(biāo)使用的補(bǔ)充說(shuō)明

在下載的【字體文件及元件庫(kù)】文件包中還單獨(dú)提供了FontAwesome v5 Free全部圖標(biāo)的Svg格式，使用SVG格式圖標(biāo)不需要安裝字體文件或設(shè)置WEB字體選項(xiàng)，直接將對(duì)應(yīng)的圖標(biāo)文件拖入到Axure編輯界面中即可。

SVG格式圖標(biāo)同樣是矢量的，支持無(wú)限放大，同時(shí)在Axure中右擊圖標(biāo)可轉(zhuǎn)為化形狀，然后可以修改它的顏色或其它樣式。

本文由 @windir?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議