Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

FontAwesome应用在web网页开发中非常方便，那么在原型设计中是否能使用呢？答案是肯定的，本文将介绍如何在Axure中应用FontAwesome字体。

具体步骤如下

1️⃣、访问 http://fortawesome.github.io/Font-Awesome/  下载最新版本的FontAwesome（当前为4.3），解压下载的压缩文件

2️⃣、打开font文件夹，双击安装.otf和.ttf结尾的字体

3️⃣、打开Axure，点击菜单  发布>预览选项（或ctrl+F5）>配置>web字体。

点击“+”号，输入字体名称FontAwesome，选择链接到css文件，

输入地址：http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css  确定，关闭。

4️⃣、打开图标列表网址 http://fortawesome.github.io/Font-Awesome/cheatsheet/  选择中意的图标，复制图标 复制图标 复制图标（重要的事情说三遍）

5️⃣、在axure中拖入一个标签元件（任何可以输入文字的都行），设置字体为FontAwesome，将文本替换（粘贴）为刚复制的图标。

OK，你可以F5预览或者直接生成html了。

如何在Axure中使用FontAwesome字体图标的更多相关文章

  1. element-ui中使用font-awesome字体图标

    element-ui提供的字体图标是很少的,所以我们需要集成其它图标来使用,nodejs的集成官方有说明,这里说明一下非nodejs开发集成图标 首先下载fontawesome,需要更改里面图标前缀, ...

  2. 如何在微信小程序中国引入fontawesome字体图标

    fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...

  3. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

  4. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  5. 在android项目中使用FontAwesome字体

    在android项目中使用FontAweSome图标集,可以方便的适配各种屏幕分辨率,不必在各种不同分辨率文件夹中新建资源文件.使用字体是一种很巧妙的方法,把图像以字体的方式呈现,这样以前设置为and ...

  6. vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  7. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  8. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  9. Bootstrap中的Glyphicon 字体图标

    在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果. 1 <!DOCTYPE html> ...

随机推荐

  1. final阶段140字评论

    按课堂顺序 1约跑APP ,无论从页面还是从功能来看完整度都很高了.演示也用了能展示的方式.多些趣味性就更赞了. 2礼物挑选小工具,做了能在规定时间内的功能.也算是对礼物固话的一个成本最低的回应. 3 ...

  2. KM算法 PK 最小费用最大流

    用到了KM算法 ,发现自己没有这个模板,搜索学习一下上海大学final大神,http://www.cnblogs.com/kuangbin/p/3228861.html #include <st ...

  3. docker--从仓库下载镜像到推送自己的项目到仓库步骤详解

    怎样从仓库下载的镜像,变成容器,并在容器中制作项目,再将容器变成镜像,然后将镜像推送到仓库? 一:从官网下载镜像 官方的https://hub.docker.com/提供了数十万个镜像提供大家下载 以 ...

  4. 【bzoj3576】 Hnoi2014—江南乐

    http://www.lydsy.com/JudgeOnline/problem.php?id=3576 (题目链接) 题意 给出一个数$F$,然后$n$堆石子,每次操作可以把一堆不少于$F$的石子分 ...

  5. 【bzoj1040】 ZJOI2008—骑士

    http://www.lydsy.com/JudgeOnline/problem.php?id=1040 (题目链接) 题意 一个基环森林,从中选出不相邻的若干个点使得这些点的点权和最大. Solut ...

  6. 如何获取codeforces的完整数据

    推荐: 如何获取codeforces的完整数据?(玄学方法) http://www.cnblogs.com/Saurus/p/6220513.html

  7. myeclipse和maven的clean和build

    转: 详解myeclipse和maven的clean和build 2018年04月20日 11:33:34 群星坠 阅读数:3529   版权声明:本文为博主原创文章,未经博主允许不得转载. http ...

  8. 枚举类型---java基础代码

    package com.mon11.day4; /** * 类说明 :定义枚举 * @author 作者 : chenyanlong * @version 创建时间:2017年11月4日 */ pub ...

  9. Vue自定义组件插入值

    我们自定义组件的时候有时候需要往组件里面插一些内容: //定义一个组件test,插值内容用slog来代替 export default { name: 'test', template:` <d ...

  10. Golang异常处理-panic与recover

    Golang异常处理-panic与recover 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在程序设计中,容错是相当重要的一部分工作,在 Go中它是通过错误处理来实现的,err ...