Font Awesome提供可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
下载字体
https://pan.baidu.com/s/1ubd837bvSnxqRDgPo3wlqw
提供otf、ttf两种格式字体下载,任选一个,或全部下载都可以(后续安装同理)
安装字体
方法1:将字体复制粘贴到C:\Windows\Fonts
方法2:左键双击字体,点击安装
方法3:右键单击字体,点击安装
安装成功后的效果:打开axure软件,在字体选择中可以看到fontawesome字体
应用字体
pmgod.cn网站提供26大行业,共计546个FontAwesome v4.7.0 字体图标
字体图标访问快捷路径:
http://www.pmgod.cn/resource/fontawesome.html
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');
领取专属 10元无门槛券
私享最新 技术干货