Axure 9.0 上使用 Font Awesome 图标库
Axure RP 可以使用 Web Fonts,这让置入 Font Awesome 变得非常方便。Font Awesome 是一种字体,只是主要针对图标使用,而非我们所熟知的中文/西文字体。
进行简单的几步设置,就可以在自己项目上面使用 Font Awesome 的 1609 个免费图标。图标覆盖广泛,风格也相对统一。
一、在本地安装 Font Awesome 字体文件
要想使用 Font Awesome,必然本地需要先可以识别,那么需要先安装字体文件。前往官方下载页面 https://fontawesome.com/download,选择下载 Free for Desktop 版本。
当前最新免费版本 5.15.1(Font Awesome 6 需要付费)
解压得到的压缩包,安装 otfs 文件夹下的三个 otf 字体文件:
- Font Awesome 5 Free-Regular-400.otf;
- Font Awesome 5 Free-Solid-900.otf;
- Font Awesome 5 Brands-Regular-400.otf。
成功安装字体文件之后,重启Axure,本机即可显示 Font Awesome 的字体图标。
二、为Axure 项目添加 web fonts 配置
仅仅在本机安装字体是不能解决在其他设备上的字体显示问题的。通过配置 web font 就可以在线调用字体,从而解决展示对象的设备不支持该字体显示的问题。
Axure 支持使用 .css 或者配置 @font-face 来调用 web fonts,点击【+ Add Font】,添加web font,选择【Link to .css】增加一条 css 引用:
Font Label 设为 Font Awesome Free
URL of CSS file 设为 https://use.fontawesome.com/releases/v5.15.1/css/all.css
此处引用的 css 文件版本为 5.15.1,与本机安装的版本对应。该 css 文件地址来自 font awesome 官方站点。
如果需要其他版本的 css 文件,可以访问 https://fontawesome.com/account/cdn (需要注册账号),按需选择自己的 css。
然而,Font Awesome 在国内的访问是不稳定的,需要使用国内站点的对应脚本进行替换,例如:https://www.bootcdn.cn/font-awesome/
继而上面的 URL of CSS file 参数则替换为国内CDN地址:https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css
Web font 配置完成,可以关闭页面。此时即时演示设备上面没有安装 Font Awesome 字体,也依然能够看到你设置的图标了。
注:此处使用了 all.css 添加了一个字体配置。也可以根据需求将 Brands、Solid、Regular 拆分成对应的三个 css 配置。
三、在 Axure 内使用 Font Awesome 图标
完成本地字体配置和 web fonts 配置之后,可以在本地直接粘贴 Font Awesome 上面的图标。
Font Awesome 的图标库:https://fontawesome.com/icons
由于只能用免费的 Solid, Regular, Brands 三个类型的图标,所以可以在左侧直接筛选对应的类型。选择所需的图标,点击 Copy Unicode Glyph 的按钮即可复制图标。随后可以在 Axure 内直接粘贴。
1. 另外的方法A
点击右侧 「Show Cheatsheet」,每个图标下方会出现一个「Copy Glyph」按钮,可以快捷复制。
2. 另外的方法B
使用 https://fontawesome.com/cheatsheet,页面上的图标可以之间点击选中,复制即可。
复制到所需的图标之后,只需在 Axure 内像粘贴文本一样将图标粘贴到文本框内,就可以显示对应的图标了。
如果遇上显示为问号的不识别的情况,请将该文本字体切换为 Font Awesome 5 Free 或者 Font Awesome 5 Brands。
四、参考链接
- 四步骤,Axure 用上 Font Awesome:
https://forum.axure.com/t/4-steps-to-get-fontawesome-5-11-2-free-axure-9-working/65942 - 六步骤,Axure用上 Font Awesome:
https://forum.axure.com/t/6-steps-to-get-font-awesome-5-pro-axure-9-working/57832 - Axure 如何使用 Web Fonts:
https://docs.axure.com/axure-rp/reference/web-fonts-font-mapping/ - 国内比较快的CSS:
https://www.bootcdn.cn/font-awesome/
Axure 9.0 上使用 Font Awesome 图标库相关推荐
- 在Axure RP 8.0 中使用 Font Awesome 图标库完成设计并能在其他未安装该字体的电脑离线预览的方法...
1.先安装FontAwesome字体,官网免费下载http://fontawesome.io 安装成功后,能在字体选择里看见FontAwesome 2.再加载FontAwesome元部件库,资源网上有 ...
- ps图片导svg,并上传到阿里图标库
设计画的图标,之前一直用的Inksacpe转的svg,并上传到阿里图标库,但是在删除背景时,图片极其容易虚化变形. 最近发现ps导出的svg,也可以上传到阿里,最关键的一步是先把图片"形状化 ...
- uni-app 引入线上的阿里 iconfont图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 在App.vue ...
- vue中使用Font Awesome图标库
Font Awesome地址:Font Awesome 中文网 – | 字体图标 1.vue中安装font awesome:npm install font-awesome --save npm in ...
- 本地预览 @mdi/font Material Design Icons 字体图标库
目录 知识前提 @mdi/font 字体图标库安装 本地预览 @mdi/font 知识前提 会使用 Node npm 命令安装库 @mdi/font 字体图标库安装 进入项目目录,指定淘宝镜像源安装, ...
- html5 fa图标库,axure官方制作FontAwesome图标元件库V5.5.0版
1.下载并安装5.5.0版本的Font Awesome 5字体文件. 下载地址: 下载之后将文件解压缩,打开里面的"otfs"文件夹,安装"Font Awesome 5 ...
- axure8.0发布html,Axure 8.0 beta最后一批新增和改进功能的介绍
之前一直想翻译Axure官方博客的这篇介绍,但一直没抽出时间,今天偶然发现Shunz@UX翻译了这篇文章.阅读后觉得翻译得很准确,特别转来分享给大家.特别是On-Premises Axure Shar ...
- Axure 9.0入门设计APP界面
Axure 9.0 下载(7天有效) 链接:https://pan.baidu.com/s/1yYOWw-SXHGoK3vc44vffSw 提取码:2y7y 前言 这个教程就是快速糊弄作业的,所以没有 ...
- 后台管理系统常用的Font Awesome图标及图标自定义方法
使用Font Awesome需要引用的文件: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/a ...
- Font Awesome html源码,CSS 中Font Awesome 图标(附码表)
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 部分图标: 其他效果图: 调用实例: Font Awesome图标调用实例 N ...
最新文章
- 最小割 ---- 最大密度子图(最大权值闭合子图)
- hbase_异常_03_java.io.EOFException: Premature EOF: no length prefix available
- 20165203《Java程序设计》第二周Java学习总结
- CentOS 7.0服务器安装配置LAMP服务器
- git第一次提交代码至远程仓库-强制推送
- JDBC 防御性编程
- SpringBoot2 整合Ehcache组件,轻量级缓存管理
- 华为照片在哪个文件夹_华为手机卡顿的罪魁祸首找到了!1秒关闭,手机流畅如丝,多用5年...
- 一台电脑两种jdk_jdk和jre有什么区别?
- css html 语法,CSS基础语法
- 华为ENSP模拟器的安装
- python进不去怎么办_python写文件有时候写不进去怎么办
- 传智播客 C/C++学习笔记 const
- c语言期末考试题库大题及详解答案,C语言期末复习题答案.doc
- spdy_buffer
- 【干货】Excel中的换行符,这几种用法你会哪些?
- Intel NUC10 i7FNH寒霜峡谷购机安装winesxi
- Android ANR日志分析指南
- LeoCAD:用于创建虚拟乐高模型的开源CAD程序
- android 获取wifi连接不上,如何检测无法在android中连接wifi?