Axure安装FontAwesome字体图标图文教程

axure商城

本文作者: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就可以正常使用了

本文由 Axure中文网 作者:Axure中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
10

评论:

22 条评论,访客:22 条,站长:0 条

100%好评

  • 好评:(100%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. 空
    发布于: 
    评分:

    链接失效了 请发我邮箱,963661329 @

  2. sophie9627
    sophie9627发布于: 

    文中的链接失效了,是否可以发到我的邮箱:sophiieee@163.com,万分感谢。

  3. lxt123
    lxt123发布于: 

    链接失效了 请发我邮箱,18611319962@163.com 谢谢了

  4. 〆﹏初、见
    〆﹏初、见发布于: 

    您好,文中的链接失效了,能否可以发到我的邮箱:1216116203@qq.com,万分感谢。

  5. 忆苦思甜
    忆苦思甜发布于: 

    链接失效了啊,那可以发一份到我的邮箱吗?我的邮箱是1767528919@qq.com
    真的非常非常感谢您!

  6. jwkuma05_
    jwkuma05_发布于: 

    文中的链接失效了,是否可以发到我的邮箱:jwkuma@163.com,万分感谢。

  7. 666
    666发布于: 

    FontAwesome图标文字安装好了,但是载入元件库的时候为什么找不到FontAwesomeV321.rplib文件,急急急,求帮助

      • 四月天
        四月天发布于: 

        文中的链接已经失效了,能否给我打下这两个文件,谢谢啦。我的邮箱:215085051@qq.com

  8. 吴娟
    吴娟发布于: 

    随便拖动一个图形,进行填充,并没有改变图形的填充颜色,改变的是它的背景色,怎么回事呢

  9. 007
    007发布于: 

    一点都不方便,还不如直接调色

  10. 浪子~~~
    浪子~~~发布于: 

    为什么我那个字体打开,没有安装那项?[泪]

    • Synmo梦儿
      Synmo梦儿发布于: 

      TTF的字体么?是不是已经安装过了?上面显示灰色的已安装?

发表评论