Axure 9.0 使用 Font Awesome实际操作具体流程

2020-12-0309:59:47原型设计Comments2,530 views1字数 2028阅读模式

Axure RP 可以使用 Web Fonts,这让置入 Font Awesome 变得非常方便。Font Awesome 是一种字体,只是主要针对图标使用,而非我们所熟知的中文/西文字体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

进行简单的几步设置,就可以在自己项目上面使用 Font Awesome 的 1609 个免费图标。图标覆盖广泛,风格也相对统一。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

一、在本地安装 Font Awesome 字体文件

要想使用 Font Awesome,必然本地需要先可以识别,那么需要先安装字体文件。前往官方下载页面 https://fontawesome.com/download,选择下载 Free for Desktop 版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

当前最新免费版本 5.15.1(Font Awesome 6 需要付费)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

解压得到的压缩包,安装 otfs 文件夹下的三个 otf 字体文件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

  1. Font Awesome 5 Free-Regular-400.otf;
  2. Font Awesome 5 Free-Solid-900.otf;
  3. Font Awesome 5 Brands-Regular-400.otf。

成功安装字体文件之后,重启Axure,本机即可显示 Font Awesome 的字体图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

二、为Axure 项目添加 web fonts 配置

仅仅在本机安装字体是不能解决在其他设备上的字体显示问题的。通过配置 web font 就可以在线调用字体,从而解决展示对象的设备不支持该字体显示的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 支持使用 .css 或者配置 @font-face 来调用 web fonts,点击【+ Add Font】,添加web font,选择【Link to .css】增加一条 css 引用:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Font Label 设为 Font Awesome Free文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

URL of CSS file 设为 https://use.fontawesome.com/releases/v5.15.1/css/all.css文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

此处引用的 css 文件版本为 5.15.1,与本机安装的版本对应。该 css 文件地址来自 font awesome 官方站点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

如果需要其他版本的 css 文件,可以访问 https://fontawesome.com/account/cdn (需要注册账号),按需选择自己的 css。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

然而,Font Awesome 在国内的访问是不稳定的,需要使用国内站点的对应脚本进行替换,例如:https://www.bootcdn.cn/font-awesome/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

继而上面的 URL of CSS file 参数则替换为国内CDN地址:https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.css文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Web font 配置完成,可以关闭页面。此时即时演示设备上面没有安装 Font Awesome 字体,也依然能够看到你设置的图标了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

注:此处使用了 all.css 添加了一个字体配置。也可以根据需求将 Brands、Solid、Regular 拆分成对应的三个 css 配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

三、在 Axure 内使用 Font Awesome 图标

完成本地字体配置和 web fonts 配置之后,可以在本地直接粘贴 Font Awesome 上面的图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Font Awesome 的图标库:https://fontawesome.com/icons文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

由于只能用免费的 Solid, Regular, Brands 三个类型的图标,所以可以在左侧直接筛选对应的类型。选择所需的图标,点击 Copy Unicode Glyph 的按钮即可复制图标。随后可以在 Axure 内直接粘贴。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

1. 另外的方法A

点击右侧 「Show Cheatsheet」,每个图标下方会出现一个「Copy Glyph」按钮,可以快捷复制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

2. 另外的方法B

使用 https://fontawesome.com/cheatsheet,页面上的图标可以之间点击选中,复制即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

复制到所需的图标之后,只需在 Axure 内像粘贴文本一样将图标粘贴到文本框内,就可以显示对应的图标了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

Axure 9.0 使用 Font Awesome实际操作具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

如果遇上显示为问号的不识别的情况,请将该文本字体切换为 Font Awesome 5 Free 或者 Font Awesome 5 Brands。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

四、参考链接

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

本文由 @Fotix 原创发布于人人都是产品经理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20738.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/20738.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定