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

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

由于FontAwesome字體圖標具有輕量和友好的特性，同時非常適合在Axure原型設計中進行應用，可以方便的實現按紐或元件的交互樣式效果。

我一直強烈推薦在原型設計中應用FontAwesome字體圖標方案，目前同行中也有很多這款字體圖標的使用愛好者。目前大家普遍使用的是FontAwesome的版本為 v4.7版，由于這個版本官方已經在兩年多以前就停止更新了，所以已經無法滿足新的使用需求。

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

首先請根據下面的鏈接下載FontAwesome v5 Free版的【字體文件及元件庫】文件包，下面我會詳細FontAwesome v5 Free版字體圖標在Axure原型設計中的使用方法。

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

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

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

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

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

首次使用FontAwesome v5 Free版字體圖標需要在本機上安裝字體文件，在下載【字體文件及元件庫】文件包解壓縮后打開【font-awesome-free\otfs】，將目錄內3個字體文件完成安裝。Win系統雙擊字體文件就會提示安裝，Mac系統安裝字體方法請自行百度。

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

2. 使用FontAwesome v5 Free版字體圖標

第一種使用方法，使用字體圖標元件庫。在【字體文件及元件庫】文件包有提供的rplib格式的元件庫文件，將元件庫文件導入到Axure元件庫中。

導入方式：在Axure軟件界面的元件庫面板中點擊更多圖標，然后選擇“載入元件庫”，然后選擇已經下載好的rplib格式的元件庫文件，這樣就完成元件庫載入了。在元件庫的選擇列表中可以切換到對應的元件庫列表。使用時從元件庫列表中找到需要的圖標，直接拖入到編輯界面中就可以了。

第二種使用方法，通過字體圖標專題頁面的圖標列表復制。在圖標列表中找到需要的圖標用鼠標左鍵雙擊，然后點擊右擊選擇復制圖標字符，這個操作跟在網頁中復制文本的操作是相同的。然后返回到Axure軟件界面中，在對應的元件中將圖標字符粘貼進去。

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

3. Axure中使用字體圖標設置常見交互效果

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

除此之外，我們還可以對包含字體圖標的元件設置選中、懸停、禁用等各種交互樣式，這也是Fontawesome字體圖標在原型設計中最易用的特點，用它來制作具有交互樣式的按紐和組件會變得非常方便。

上面的演示為Axure中使用字體圖標實現的按紐鼠標懸停交互效果，如果使用的是獨立的圖標文件實現這種效果是非常復雜的，而在元件中插入字體圖標只需要簡單的一步就可以完成了。

4. 如何在未安裝字體的設備上顯示字體圖標

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

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

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

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

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

5. 一個文件同時使用多個FontAwesome版本

FontAwesome字體圖標的多個版本是可以在同一個Axure的原型文件中，使用時需要同時安裝每個版本對應的字體文件或設置對應的WEB字體選項。

例如我們在一個原型文件中同時使用了FontAwesome的v4.7、v5 Free、v5 Pro三個版本的字體圖標，需要先安裝這個三個版本對應的字體文件，然后在發(fā)布設置的Web字體設置中設置對應名稱和CSS鏈接，v4.7設置名稱為【FontAwesome】， v5 Free設置名稱為【FontAwesome 5 Fee】，v5 Pro設置名稱為【FontAwesome 5 Pro】，對應的CSS鏈接以對應專題頁面或提供的CSS鏈接為準。

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

不過，FontAwesome的版本是向下兼容的，如果你創(chuàng)建的是一個新的Axure文件并開始使用v5版本，建議不要再同時使用舊版本了。另外，v5 Pro版中已經包含了v5 Free版的全部圖標，如果已經使用了v5 Pro版，建議不要再同時使用v5 Free版了。

6. 字體圖標無法正常顯示問題說明

首先應檢查字體文件是否已經正確安裝，或者安裝的字體版本是否與使用的圖標的版本是否一致。使用FontAwesome v5 Free版字體圖標請根據第1點中的說明安裝Free版字體文件，用于添加外部Web字體CSS鏈接以Free版專題頁面中提供的鏈接為準。

通過Free版專題頁面中的圖標列表復制字體圖標時，在Axure中需要設置正確的字體和圖標類型，否則也將導致圖標在預覽時無法正常顯示，具體設置方式在第2點中有詳細說明。

如果遇到Axure中圖標可以正常顯示，但是在預覽時卻是亂碼的現象，一般是由于修改了頁面的樣式里面的“字體系列”選項導致的。這個字體系列的選項默認的是【Applied Font】，請不要去修改它，否則會覆蓋頁面中所有的字體屬性設置而導致字體圖標失效。

7. 關于圖標使用的補充說明

在下載的【字體文件及元件庫】文件包中還單獨提供了FontAwesome v5 Free全部圖標的Svg格式，使用SVG格式圖標不需要安裝字體文件或設置WEB字體選項，直接將對應的圖標文件拖入到Axure編輯界面中即可。

SVG格式圖標同樣是矢量的，支持無限放大，同時在Axure中右擊圖標可轉為化形狀，然后可以修改它的顏色或其它樣式。

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

題圖來自Unsplash，基于CC0協議