Axure安装FontAwesome字体图标图文教程
本文最后更新于 3479 天前,其中的信息可能已经有所发展或是发生改变。

在用Axure做原型设计时常常需要用到图标。常用的方法就是采用网络上分享出来的部件库,比较全的就是小楼老师的部件库。但是这种部件库的ICON一般都是图片,当颜色与当前原型色调不一样的时候,就不能用了。而且ICON常常表示状态,不同的状态需要不同的颜色,用图片做原型ICON就不合适了。后来发现了一个神器,字体icon,每个icon其实就是一个文字,文字更改颜色和大小非常方便。 字体名称:FontAwesome FontAwesome字体下载链接:http://yunpan.cn/cytakifcnYz6j(提取码:fa4d) FontAwesome字体部件库:http://yunpan.cn/cyXw7JszvyPmh(提取码:53db) 1.字体安装 a.下载完字体之后,解压缩文件,选择font文件夹

1bd34fab773fe581a75263e70db658b0

b.双击字体文件,进入字体安装页面(两个都需要)

2420fc328d41f9556ebdaa51288e870d

c.在页面中确认安装

6f068dc827ade5054804925727388159

d.安装成功后,你就可以在你的Axure字体选择就可以看到FontAwesome了、

820717df23cb2953b044363d924169d4

2.载入字体库 但是在使用的时候,却发现并不知道怎么用。我怎么打出这样一个个图标呢?这个时候你可以选择到FontAwesome官网上一个个找,找到后复制黏贴就可以了。但是效率低。这个时候,我们将字体一个个拆分,做成部件,使用就很方便了。字体部件库下载链接见上图。下面来说安装方式 a.载入部件库,在Axure中选择【载入元件库】(或直接复制黏贴到axure根目录下的元件库文件夹里)

2a8c909c7acae9b021179b6f41b5fd83

b.找到你下载的rplib文件,进行安装

ccd8c55babb0f5c7541e3f5fec66732e

c.使用时,选择全部/FontAwesome部件库

a6595716d7c4f650c4c488d7187127dc

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

3a12eadcdc688b02434be3e01f63c226

3.生成原型之后,链接CSS样式 完成原型制作之后,然后就是给别人看了,由于我们使用了特殊的FontAwesome字体,就需要告知网页加载这个字体样式。 a.在Axure发布页面,修改配件文件

d2f09915bbbaab63b384ca0d15054cfa

b.选择默认的HTML样式

0df3778a8e52c98d82872f984a398594

c.在web字体中,新增一个web字体的css样式 链接地址  http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

6cf8b4a201e046216c8fc50966188a8a

4.这样我们的FontAwesome就可以正常使用了

dc8c540cd74a955f69e77e1fe843fabf

[整理:CALONYE]

文章名称:《Axure安装FontAwesome字体图标图文教程》
文章链接:https://www.1udd.com/16565.html
版权声明:本文采用 License 知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
风险声明:本站资源仅供个人学习交流,请于下载后 24 小时内删除,请勿用于商业用途,否则法律问题自行承担!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇