axure商城

FontAwesome v5最新版字體圖標元件庫分享,一套絕佳的矢量字體圖標元件庫

FontAwesome是一款基于CSS框架的矢量字體圖標庫,提供了豐富的圖標類型和各類常用的精美圖標,在前端開發和設計領域中都非常流行和受歡迎。FontAwesome的主要特色是支持無限縮放和矢量輸出,并且可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。由于FontAwesome字體圖標具有輕量和友好的特性,同時非常適合在Axure原型設計中進行應用,可以方便的實現按紐或元件的交互樣式效果。

我一直強烈推薦在原型設計中應用FontAwesome字體圖標方案,目前同行中也有很多這款字體圖標的使用愛好者。目前大家普遍使用的是FontAwesome的版本為 v4.7版,由于這個版本官方已經在兩年多以前就停止更新了,所以已經無法滿足新的使用需求。這次分享的FontAwesome v5字體圖標元件庫,是根據官方的最新版本v5.7.2整理完成的,包含了更全面的圖標類型和豐富的圖標數量,相信可以滿足大多數同學在原型設計中的使用需求。

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

FontAwesome v5 Free版字體及元件庫下載:
https://www.axureshop.com/a/555560.html
注:包含v5 Free版字體文件及rplib元件庫,首次使用需要安裝字體。

FontAwesome v5 Free版字體圖標方案專題:
http://www.axureux.com/FontAwesome/Free.html
注:包含v5 Free版全部圖標列表,方便查找和復制使用,后續將持續更新。

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

首次使用FontAwesome v5 Free版字體圖標需要在本機上安裝字體文件,在下載【字體文件及元件庫】文件包解壓縮后打開【font-awesome-freeotfs】,將目錄內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字體文件,在預覽原型文件時字體圖標都可以正常顯示。而如果輸出的原型在其它在未安裝字體文件的電腦上演示時,圖標顯示為亂碼該如何處理?

第一種方法,在發布設置中Web字體選項中添加外部Web字體CSS鏈接。添加方式:發布—生成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

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

完成拷貝后再添加CSS鏈接,添加方式:發布—生成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三個版本的字體圖標,需要先安裝這個三個版本對應的字體文件,然后在發布設置的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的版本是向下兼容的,如果你創建的是一個新的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中右擊圖標可轉為化形狀,然后可以修改它的顏色或其它樣式。

給TA買糖
共{{data.count}}人
人已贊賞
Axure元件庫

APP常用版塊樣式元件庫-國行版 導航欄 聊天界面 圖文列表 個人中心大小可改變 顏色可修改

2019-1-2 18:55:22

Axure元件庫

一套高保真Web元件庫(基于Element UI)

2019-3-24 19:00:41

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo