axure商城

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

下载字体

FontAwesome字体下载链接:点击下载

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

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

安装字体

方法1:将字体复制粘贴到C:WindowsFonts

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

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

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

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

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

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

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

应用字体

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

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

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

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

1、选择、复制字体图标

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

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

2、粘贴、应用字体图标

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

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

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

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

3、预览效果

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

常见问题

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

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

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

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

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

font-family: FontAwesome;

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
Axure教程

滑动条:拖动滑块改变进度

2019-1-18 21:52:55

Axure教程

完整案例,新手必看,通过仿制拼多多学会Axure常见及酷炫操作

2019-2-11 20:15:01

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索