fontawesome字体图标库（fontawesome字体图标库 自定义）



Fontawesome字体图标具有轻量和友好的特性，非常适合在Axure原型设计中进行应用，能很好地表达页面需求，又不会干扰UI人员的设计工作。

正常情况下，我们在电脑上已经安装了 Fontawesome 字体文件，在预览Axure原型HTML文件时，字体图标是显示正常的；如果将输出的原型HTML发布到网上，或在其它未安装字体文件的电脑上演示时，图标就会显示为空或乱码，这种情况怎么解决呢？

我们只需要在Axure中设置一下Web字体选项即可解决这个问题。

在Axure的发布设置中，在Web字体选项中添加外部Web字体CSS链接。添加方式：发布_生成HTML文件_Web字体，勾选“包含Web字体”，点击＋图标，设置名称（可随意），然后将CSS链接地址添加到URL中，再生成HTML文件即可。

下面分别是Axure 8和9设置WEB字体选项的截图。

CSS链接地址：https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css

方法一是基于互联网来实现，那么如果是未联网的设备，又怎么办呢？

我们可以在发布设置中添加本地Web字体CSS链接，这种方法是使用相对路径调用的字体资源。

首先添加CSS链接，添加方式：发布_生成HTML文件_Web字体，勾选“包含Web字体”，点击加号图标，设置名称（可随意），CSS链接地址设置为【resourcesFont-Awesomecssall.css】，生成HTML文件。

然后将包含CSS和字体的【Font-Awesome】文件夹，整个拷贝到【原型HTML目录 esources】中，如下图。

CSS文件中包含字体文件的相对路径，因此该路径必须与字体文件的存储路径一致，才能正常显示字体图标（如下图所示）。

PS：Unicons字体图标的使用方法亦可以参考本文。

Unicons线形字体图标元件库 1200+

FontAwesome v5.15.3 字体图标元件库 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/25453.html