FontAwesome字体图标安装、应用图文教程

下载字体

FontAwesome字体下载链接:https://pan.baidu.com/s/1ubd837bvSnxqRDgPo3wlqw

提供otf、ttf两种格式字体下载,任选一个,或全部下载都可以(后续安装同理)

安装字体

方法1:将字体复制粘贴到C:\Windows\Fonts

方法2:左键双击字体,点击安装

方法3:右键单击字体,点击安装

安装成功后的效果:打开axure软件,在字体选择中可以看到fontawesome字体

应用字体

pmgod.cn网站提供26大行业,共计546个FontAwesome v4.7.0 字体图标

字体图标访问快捷路径:FontAwesome v4.7.0 字体图标

1、选择、复制字体图标

选择需要使用的字体图标,左键双击选择、右键单击复制

2、粘贴、应用字体图标

将字体图标复制到所在位置时,初始状态是一个类似正方形框框的图标

选择字体图标,修改字体、大小、颜色、对齐方式后效果如下:

3、预览效果

常见问题

我的原型能正常预览字体图标,为什么发给他人之后,他人却看不到效果

解决办法1:对方安装FontAwesome字体

解决办法2:【发布】-【预览选项】-【配置】-【Web字体】中进行设置,添加链接到“.css”文件,URL中填写“https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css”(对方需要在线联网)

解决办法3:【发布】-【预览选项】-【配置】-【Web字体】中进行设置,@font-face{}内容区填入以下内容(该方法需要将fontawesome-webfont.ttf字体放在生成的原型文件夹根目录下)

font-family: FontAwesome;

src:url('fontawesome-webfont.ttf') format('truetype');

本文已完结。欢迎点击加入QQ群“532261671”进行产品交流互动学习。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有...
    witmin阅读 19,641评论 5 86
  • 什么是图标字体? 图标字体就是在做手机APP或WEB项目时为了能方便控制图标的大小、颜色等属性而将图标字体化 图标...
    AlexanderJLiu阅读 14,593评论 1 21
  • 最近兴致上来,就想更换了那Blog标题字体(汉字的);网上搜索了一番,发现蘇新詩柳繁體这款甚合我心;然后就着手搞将...
    晚晴幽草阅读 2,447评论 1 8
  • 雾霾天会让自己比较不适应,一直生活在海口的我对雾霾会很敏感,对空气质量要求很高,这就是家里总会备着净化器的...
    Fineyoga乐乐阅读 139评论 0 0
  • 昨晚,在主校区学术报告厅,我们外语系迎来了第11届戏剧比赛,而我们17级学生带来的,则是家喻户晓的《灰姑娘》。 此...
    小犟阅读 287评论 0 0