最新版字體圖標元件庫分享,一套絕佳的矢量字體圖標元件庫
這次分享的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協議
樓主字體圖標的交互效果,好像只有Axure rp8可以實現,rp9就找不到入口了。確實好方便,感謝分享!
這位是個神仙
安裝完之后為什么不能改變填充顏色呢?
終于等到你 ??