axure商城

Axure安裝FontAwesome字體圖標圖文教程

本文作者:xunzou 原文地址:http://www.jianshu.com/p/806ae932082b?略有刪改

在用Axure做原型設計時常常需要用到圖標。常用的方法就是采用網絡上分享出來的部件庫,比較全的就是小樓老師的部件庫。但是這種部件庫的ICON一般都是圖片,當顏色與當前原型色調不一樣的時候,就不能用了。而且ICON常常表示狀態,不同的狀態需要不同的顏色,用圖片做原型ICON就不合適了。后來發現了一個神器,字體icon,每個icon其實就是一個文字,文字更改顏色和大小非常方便。

字體名稱:FontAwesome

FontAwesome字體下載鏈接:http://yunpan.cn/cytakifcnYz6j(提取碼:fa4d)

FontAwesome字體部件庫:http://yunpan.cn/cyXw7JszvyPmh(提取碼:53db)

1.字體安裝

a.下載完字體之后,解壓縮文件,選擇font文件夾

b.雙擊字體文件,進入字體安裝頁面

c.在頁面中確認安裝

d.安裝成功后,你就可以在你的Axure字體選擇就可以看到FontAwesome了、

2.載入字體庫

但是在使用的時候,卻發現并不知道怎么用。我怎么打出這樣一個個圖標呢?這個時候你可以選擇到FontAwesome官網上一個個找,找到后復制黏貼就可以了。但是效率低。這個時候,我們將字體一個個拆分,做成部件,使用就很方便了。字體部件庫下載鏈接見上圖。下面來說安裝方式

a.載入部件庫,在Axure中選擇【載入元件庫】

b.找到你下載的rplib文件,進行安裝

c.使用時,選擇全部/FontAwesome部件庫

d.直接使用,然后你就可以直接使用了,自由更改字體大小,顏色等

3.生成原型之后,鏈接CSS樣式

完成原型制作之后,然后就是給別人看了,由于我們使用了特殊的FontAwesome字體,就需要告知網頁加載這個字體樣式。

a.在Axure發布頁面,修改配件文件

b.選擇默認的HTML樣式

c.在web字體中,新增一個web字體的css樣式

鏈接地址 ?http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

4.這樣我們的FontAwesome就可以正常使用了

給TA買糖
共{{data.count}}人
人已贊賞
基礎教程

顯示當前進度的橫向滑塊

2016-1-25 12:15:17

基礎教程

如何自制Axure部件庫(元件庫)圖文教程

2016-3-30 23:08:24

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