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. 学习Java并发的课程

    https://www.javaspecialists.eu/courses/concurrency.jsp http://www.jconcurrent.com/ javaConcurrentAni ...

  2. C# 爬虫小程序

    设计思路 主要基于Http Get请求网页数据,进行分析.涉及递归调用,多线程提高效率,守护线程等. 相关技术 抽象类 多线程 队列 Http Get请求 字符串解析 项目结构 AbsChain 职责 ...

  3. File类里的静态字段

    我们都知道windows操作系统和Linux操作系统中的路径分隔符是不一样的,当我们直接使用绝对路径的时候,程序会报错误:No such file or diretory”的异常 File类有几个类似 ...

  4. P3232 [HNOI2013]游走 解题报告

    P3232 [HNOI2013]游走 题目描述 一个无向连通图,顶点从\(1\)编号到\(N\),边从\(1\)编号到\(M\). 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概 ...

  5. 洛谷P2672 推销员

    沙雕贪心...... 我一开始想的是倒着来,每次减去一个. 然后我们就有两个决策:去掉最后一个/去掉前面某一个. 然后第一个决策用并查集维护,第二个决策用线段树即可.仔细想想觉得普及组不会考这种东西, ...

  6. 使用Sql语句快速将数据表转换成实体类

    开发过程中经常需要根据数据表编写对应的实体类,下面是使用sql语句快速将数据表转换成对应实体类的代码,使用时只需要将第一行'TableName'引号里面的字母换成具体的表名称就行了: declare ...

  7. python自带的IDLE如何清屏

    作者:知乎用户 链接:https://www.zhihu.com/question/20917976/answer/32876441 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  8. Python正则表达式(regular expression)简介-re模块

    Python正则表达式(regular expression)简介-re模块 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 就其本质而言,正则表达式(或RE模块)是一种小型的,高度 ...

  9. UnicodeDecodeError gbk codec can't decode byte in position illegal multibyte sequence

    UnicodeDecodeError:'gbk' codec can't decode byte in position : illegal multibyte sequence 觉得有用的话,欢迎一 ...

  10. .NET面试题系列(七)IIS

    应用程序池的集成模式和经典模式的区别 应用程序池模式会影响服务器处理托管代码请求的方式. 如果托管应用程序在采用集成模式的应用程序池中运行,服务器将使用 IIS 和 ASP.NET 的集成请求处理管道 ...