Axure 图标解决方案_html/css_WEB-ITnose
常用的方法就是采用网络上分享出来的部件库,比较全的就是小楼老师的部件库。
但是这种部件库的ICON一般都是图片,当颜色与当前原型色调不一样的时候,就不能用了。而且ICON常常表示状态,不同的状态需要不同的颜色,用图片做原型ICON就不合适了。
字体CION方式
后来发现了一个神器,字体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就可以正常使用了
推荐阅读
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
精通CSS:高级Web标准解决方案(第2版)_html/css_WEB-ITnose
-
分享15个优秀的 CSS 解决方案和工具_html/css_WEB-ITnose
-
css中文本框与按钮对不齐解决方案_html/css_WEB-ITnose
-
图片上面加浮动标签a,鼠标移动到a标签加图标_html/css_WEB-ITnose
-
CSS3动画实现loading加载图标_html/css_WEB-ITnose
-
(http://fonts.googleapis.com/css?)打开很慢解决方案_html/css_WEB-ITnose
-
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose
-
如何通过coding pages 展示 Axure HTML_html/css_WEB-ITnose
-
css中文本框与按钮对不齐解决方案_html/css_WEB-ITnose