中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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)需要在本機上安裝字體文件，在下載【字體文件及元件庫】文件包解壓縮后打開【font-awesome-free\otfs】，將目錄內(nèi)3個字體文件完成安裝。Win系統(tǒng)雙擊字體文件就會提示安裝，Mac系統(tǒng)安裝字體方法請自行百度。

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

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

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

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

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

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

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

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

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

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

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

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

第一種方法，在發(fā)布設(shè)置中Web字體選項中添加外部Web字體CSS鏈接。添加方式：發(fā)布—生成HTML文件—Web字體，勾選“包含Web字體”，點擊加號圖標(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字體選項中添加本地Web字體CSS鏈接，使用這種方法是即使在未聯(lián)網(wǎng)狀態(tài)下圖標(biāo)也能正常顯示。在添加本地CSS鏈接前需要將【字體文件及元件庫】文件包中的【font-awesome-free】文件夾拷貝到【Axure安裝目錄\DefaultSettings\Prototype_Files\resources\】中，下面為拷貝完成后的截圖。

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

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

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

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

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

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

6. 字體圖標(biāo)無法正常顯示問題說明

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

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

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

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

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

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

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

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