Axure使用图标字体

什么是图标字体？

图标字体就是在做手机APP或WEB项目时为了能方便控制图标的大小、颜色等属性而将图标字体化

图标字体的优点

轻量性：图标字体相比于纯图片占用的空间要小，加载的速度快
灵活性：图标字体可以通过设置字体大小、颜色等方便地改变图标的大小和颜色，不需要频繁的更换图片
资源丰富：网上有很多免费的图标字体库，提供的图标十分丰富，能够满足我们绝大多数的开发需求

在线的图标字体库

Font Awesome：为Bootstrap而生，应该是最广为人知的图标库，最新4.7版下载
http://www.fontawesome.com.cn/

font-awesome.png
IcoMoon：提供了很多icon packes可以选择性下载

icomoon.png
阿里巴巴矢量图标库：阿里出品，海量图标，随意选择和下载

iconfont.png

Axure使用图标字体

在Axure使用图标字体，避免了我们使用纯图片带来的一系列问题：如想改变图片颜色，需要重新导入新的图片；想改变大小可能会导致图片失真等

Axure中使用步骤（以Font Awesome为例）：

首先下载Font Awesome下载
双击安装解压后的fonts文件夹下的fontawesome-webfont.ttf字体文件

install_fonts.png
安装完成，如果此时Axure打开，需要重启Axure，载入新的FontAwesome字体
借助word将Font Awesome的矢量图片复制到Axure

word中点击插入->符号->其它符号
字体选择FontAwesome（安装完字体文件word中就有了该字体）

word_fonts.png
插入到word中然后复制到Axure中
出现以下状况，请选择FontAwesome字体

axure_no_show.png
正常显示如下，可随意更改大小及颜色

axure_show.png

生成Html文件

我们在Axure中做完后，一般会生成Html以供他人阅览，而这时他人的电脑上没有安装指定的字体就会出现图标不显示的问题

解决方法

引入在线的css文件：一般的在线图标库有会提供css文件的cdn网络地址，我们需要将url引入到Axure中

在Axure中使用CTRL+F5或点击Publish->Preview Options打开选项框
然后点击Configuration，选择WebFonts项，新增一个webfont，名称为FontAwesome，url为css文件的cdn地址http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css，如下图所示：

online_css.png
然后生成的Html文件中就会引入该css，在任何联网的电脑上都能正常显示图标

1中的方法需要联网才能正常显示图标，如果我们想本地化，我们需要另行配置

按1中方法打开web fonts配置项，将url修改为本地资源所在位置，如下图所示：

local_css.png
Axure生成的Html结构如下图所示，css等资源文件都在resources文件夹下：

html_structure.png
所以我们要将下载的FontAwesome中的css文件，和fonts文件都拷贝到该文件夹下，以和我们上面配置的css文件路径相符
注意css文件和fonts文件的相对路径

几点说明

我们在Axure中的配置主要是为了生成Html文件后能载入css文件并能正常显示图标
一定要将css文件和fonts文件都拷贝到生成的Html文件中，没有fonts文件仍然不能显示
使用其他的图标字体和FontAwesome的使用方法一致

链接：https://www.jianshu.com/p/8a900311dedc

Axure使用图标字体相关推荐

如何在Axure中使用Iconfont图标字体
需求背景在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...
axure字符图标 web字体 iconfont配置
axure有自带一些图标,但不一定能满足日用使用,使用图片有时不方便做样式,所以有一套自己的图标库是会大大提升日常使用效率. 使用到图标,需要进行如下配置: 1.在别人的电脑上能看到图标发布--预览 ...
axure弹窗关闭_干货来袭，Axure插入图标的几种办法
前言在日常绘制原型的时候,经常会需要插入相应的图标(icon)到Axure中,但是看似好像很简单的事情也给蛮多小伙伴造成了困扰. 现在很多开发团队都会用一些比较常见的前端框架来搭建后台管理系统,例如 ...
Axure RP9 Web字体设置
1.下载Font Awesome字体下载链接(http://www.fontawesome.com.cn/) 2.解压并打开文件 ⑴ 字体文件的扩展名有eot.otf.fon.font.ttf.tt ...
html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示本地下载主要特性使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小自由的修改颜色添加阴影 ...
免费资源：Typicons-免费图标字体
为什么80%的码农都做不了架构师?>>> 日期:2012-9-15 来源:GBin1.com 以前的而文章中我们分享过很多图标字体,今天推荐另外一套.Typicons是一套非 ...
给网页图标字体 Font Awesome 添加动画效果
在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...
30个免费网页图标字体以及使用方法
文章来源:http://sc.chinaz.com/info/130228237055.htm 设计达人版权: Free for personal or commercial projects 查看 ...
免费图标字体：一套圣诞节相关的图标字体
为什么80%的码农都做不了架构师?>>> 日期:2012-12-6 来源:GBin1.com 下载地址圣诞节快到了,这里我们给大家分享一套免费的圣诞节主题的图标字体,希望大 ...
python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选.但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义.为自己 ...

Axure使用图标字体

什么是图标字体？

图标字体的优点

在线的图标字体库

Axure使用图标字体

Axure中使用步骤（以Font Awesome为例）：

生成Html文件

几点说明

Axure使用图标字体相关推荐

最新文章

热门文章