微信公众号
网站交流群
了解平台
帮助手册
业务咨询
专业的交互原型素材原创分享平台
会员服务
教程分享
工具导航
资源分享
付费作品
网站首页
原型托管
免费作品
AxureUX.com
Copyright © www.AxureUX.com, All Rights Reserved.
深圳木卫二科技有限公司 粤ICP备17007397号 本站使用Axure9设计制作
微信公众号
搜索关注：AxureUX
QQ交流群
Hello World
FontAwesome v4.7.0字体图标方案
CSS链接：
字体下载：
查看
下载
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
Font Awesome v4.7字体图标使用说明
安装字体文件
首次使用字体图标需要在本机上安装FontAwesome字体文件，点击上面的的字体下载按纽获得字体文件包。解压缩后打开其中的Fonts文件夹，安装里面的FontAwesome.otf或Fontawesome-webfont.ttf这两个字体文件。Win系统双击这字体文件就会提示安装，Mac系统安装字体方法请自行百度。字体安装完成后需要重新启动Axure，重启后选中字体时在字体列表中如果能看到【Fontawesome】，则代表字体已经安装成功。
使用字体图标
在本页面找到需要的图标用鼠标左键双击，然后点击右击选择复制图标字符，这个操作跟在网页中复制文本的操作是相同的。然后返回到Axure软件界面中，在对应的元件中将图标字符粘贴进去。这个时候我们看到的图标仍然是一个乱码字符，我们需要选中这个乱码字符，在字体属性中将它的字体设置为【Fontawesome】，然后图标就能正常显示了。
设置字体图标
Fontawesome具有跟字体一样的特性，我们可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影等。设置方法跟设置字体的样式是一致的，选中图标字符在字体样式中就可以进行设置。除此之外，我们还可以对包含字体图标的元件设置选中、悬停、禁用等各种交互样式，这也是Fontawesome图标在原型设计中最易用的特点，用它来制作具有交互样式的按纽和组件会变得非常方便。
如何显示图标
如果我们已经在本机上安装了Fontawesome字体文件，在预览原型文件时字体图标都可以正常显示。而如果输出的原型在其它在未安装字体文件的电脑上演示时，图标显示为乱码该如何处理？第一种方法，在发布设置中Web字体选项中添加外部Web字体CSS链接，CSS链接地址可以在页面上方看到，需要将它复制并添加到Axure发布选项的Web字体中，这样生成的原型文件就可以在任何设备中演示时正常显示字体图标了。添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，然后设置名称为【FontAwesome】，将CSS链接地址添加到URL中，然后生成HTML文件就可以了。
第二种方法，在发布设置中的Web字体选项中添加本地Web字体CSS链接，使用这种方法即使在未联网状态下图标也能正常显示。将字体文件压缩包解压出来后将【font-awesome-4.7】目录拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中。完成拷贝后再添加CSS链接，添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【FontAwesome】，CSS链接地址设置为【resources/font-awesome-4.7/css/font-awesome.css】，生成HTML文件即可。
图标无法显示
当前我们使用的Fontawesome字体文件版本为v4.7，使用时必须同样安装该版本的字体文件，如果安装的是其它版本可能会部分图标会无法正常显示。另外，如果遇到Axure中图标可以正常显示，但是在预览时却是乱码的现象，一般是由于修改了页面的样式里面的“字体系列”选项导致的。这个字体系列的选项默认的是Applied Font，请不要去修改它，否则会覆盖页面中所有的字体属性设置而导致字体图标失效。
相关补充说明
目前除了Fontawesome字体图标之外，还有Ionicons和Meatrial Design等其它字体图标，如果有兴趣可以自行百度了解。字体图标的使用方式基本都是类似的，都需要安装对应的字体文件，但是不同的字体图标类型是不能混用的，每个字体文件只对当前的图标类型有效哦。为什么我们推荐使用Fontawesome v4.7字体图标，因为用于显示它的Web字体CSS链接有稳定的CDN服务支持。
更多图标推荐
Fontawesome包含的图标类型基本满足原型设计的需要，为了便于大家进行查找和使用其中的图标，我们将Fontawesome v4.7的600+款全部图标整理并在下面列了出来，强烈建议你将本页面添加到收藏夹中。你还可以直接下载由小楼老师分享的Fontawesome v4.7图标元件库元件库使用，通过百度或加入网站的相关交流群通过群文件都能下载到。另外，如果在设计中需要更多的图标，可以查看网站的图标推荐，建议配合使用阿里的IconFont图标库，它提供的图标数量达到了数百万，网址：http://www.iconfont.cn
1
2
3
5
4
6
7
更多使用类问题请看帮助手册
WEB应用
查询
查询+
查询-
购物车
购物车+
购物车-
购物篮
手提包
星形
星形
半颗星
半颗星
云端
云端上传
云端下载
分享
分享
调整
锚
酒杯
音乐
电影
纸飞机
工业
电视
锁定
解锁
标签
标签组
书籍
书签
打印
铅笔
填色
编辑
准心
礼物
树叶
火焰
磁铁
转发
旧式相机
钥匙
齿轮组
登录
退出
外部链接
奖杯
柠檬
书签
RSS
硬盘
扩音器
证书
地球
扳手
任务
过滤器
公文包
烧瓶
汉堡菜单
魔术棒
锤子
转速表
闪电
站点地图
雨伞
电灯
交换
手提箱
咖啡
餐具
建筑
啤酒
桌面
笔记本电脑
微笑
皱眉
无聊
游戏手柄
键盘
终点
代码
方向
裁剪
代码分支
拼图
盾牌
灭火器
分享
解锁
靶心
RSS
票
升级
降级
铅笔
外部
指南针
太阳
雪花
月亮
档案
臭虫
大学
博士帽
语言
传真
建筑
熊掌
勺子
立方体
立方体组
回收
树
数据库
救生圈
历史记录
圆形
炸弹
足球
文字电话
望远镜
插头
报纸
计算器
滴管
画刷
生日蛋糕
服务器
钻石
街景
床
鼠标指针
光标
组合
取消组合
便签
便签
天平
版权
商标
@
注册
知识共享
知识共享
浴缸
淋浴
音频
订单
双角符下
双角符左
双角符右
双角符上
单角符下
单角符左
单角符右
单角符上
箭头下
箭头左
箭头上
箭头右
箭头下
箭头左
箭头右
箭头上
箭头下
箭头左
箭头右
箭头上
箭头拖动
箭头左右
箭头上下
插入符下
插入符左
插入符右
插入符上
插入符下
插入符左
插入符右
插入符上
人字形下
人字形左
人字形右
人字形上
人字形下
人字形左
人字形右
人字形上
长箭头下
长箭头左
长箭头右
长箭头上
500Px
Adn
Amazon
Android
Angellist
Apple
Behance
Behance
Bitbucket
Bitbucket
Black-Tie
Buysellads
Chrome
Codepen
Codiepie
Connectdevelop
Contao
CSS3
Dashcube
Delicious
Deviantart
Digg
Dribbble
Dropbox
Drupal
Edge
Empire
Expeditedssl
Firefox
Flickr
Fonticons
FontAwesome
Forumbee
Foursquare
Get-Pocket
Git
Git
Github
Github
Github
谷歌
谷歌+
谷歌+
Gratipay
Hacker-News
Houzz
HTML5
IE
Ioxhost
Joomla
Jsfiddle
Lastfm
Lastfm
Leanpub
Linux
Maxcdn
Meanpath
Medium
Mixcloud
Modx
Odnoklassniki
Odnoklassniki
Opencart
Openid
Opera
Optin-Monster
Pagelines
贝宝
Pied
Product-Hunt
Rebel
人人网
Safari
Scribd
Sellsy
Share
Share
Shirtsinbulk
Simplybuilt
Skyatlas
Skype
Slack
Slideshare
Soundcloud
Spotify
Stack
Stack
Steam
Steam
Stumbleupon
Stumbleupon
腾讯微博
Trello
Tripadvisor
Tumblr
Tumblr
Twitch
Viacoin
Vimeo
Vimeo
Vine
Vk
微信
新浪微博
Wikipedia
Windows
Wordpress
Y-Combinator
雅虎
Yelp
Youtube
Youtube
Bandcamp
Eercast
Envira
Etsy
Awesome
Freecodecamp
Gitlab
Glide
Glide
Grav
Imdb
Linode
Meetup
Pied Piper
Podcast
Quora
Ravelry
Snapchat
Snapchat
Snapchat
Themeisle
Viadeo
Viadeo
Wpbeginner
Wpexplorer
Yoast
微芯片
电报
普及
Font Awesome v4.7全部图标列表
方向图标
对齐-中
对齐-两端
对齐-左
对齐-右
粗体
链接
链接断开
剪切板
列
复制
剪切
缩进-减
橡皮
文件-文本
文件-文本
文件组
保存-软盘
字体
标题
缩进-加
斜体
列表
列表
编号列表
列表
附件
分段符
重做
撤销
删除线
下标
上标
表格
文本-高
文本-宽
表格
表格
项目列表
文本编辑
下划线
手机图标
眼睛
隐藏
电源-关
信号
垃圾桶
首页
时钟
二维码
条形码
相机
摄像机
图片
电话
电话
平板电脑
移动设备
麦克风
静音
省略-水平
省略-垂直
滑块
WIFI
铃声
铃声
铃声-静音
铃声-静音
垃圾桶
开关-关
开关-开
电池-满
电池-3格
电池-半
电池-1格
电池-空
蓝牙
蓝牙
USB
通话中
符号图标
乘号
对号
乘号
对号
乘号
对号
加号
减号
加号
减号
星号
问号
问号
问号
叹号
叹号
叹号
信息
信息
引号-右
引号-左
禁止
百分号
井号
媒体播放
随机
耳机
音量-关
音量-低
音量-高
全屏
后退
收起
弹出
展开
快退
快进
前进
暂停
暂停
暂停
播放
播放
播放
后退
前进
停止
停止
停止
Youtube播放
手势图标
手型-石头
手型-布
手型-剪刀
手型-爬虫
手型-斯波克
手型-指针
手型-和平
手型-下
手型-左
手型-右
手型-上
好评
差评
好评
差评
握手
交通工具
小汽车
出租车
巴士
自行车
摩托车
火车
地铁
轮船
飞机
战斗机
航天飞机
火箭
卡车
文件图标
文件夹
文件夹打开
文件夹
文件夹打开
上传
下载
文件
文件
Excel
Ppt
Image
代码
音频
视频
Word
Zip
性别图标
女性
无性
男性
变性
双性
双性
女女
男男
男女
伪娘
伪娘-水平
伪娘-垂直
中性
表单图标
复选框
复选框
圆形
圆形
圆点
减号
加号
减号
加号
方形
方形
形式
支付图标
信用卡
信用卡
Amex
DinersClub
Discover
Jcb
万事达
贝宝
Stripe
Visa
谷歌钱包
货币图标
货币
比特币
人民币
美元
欧元
英镑
新谢克尔
卢比
韩元
卢布
里拉
根西岛镑
根西岛镑
用户图标
女士
男士
儿童
用户
用户
用户
用户
用户组
匿名用户
用户-添加
用户-删除
通讯录
通讯录
名片
名片
证件
证件
徽章
医学图标
救护车
H
心形
心形
心跳
医院
急救箱
听诊器
医生
轮椅
温度计
温度计
温度计
温度计
温度计
温度计
地图图标
旗帜
旗帜
旗帜方格
公路
图钉
指示牌
地图
地图
标记
图钉
排序图标
排序
升序
降序
字母升序
字母降序
数量升序
数量降序
数字升序
数字降序
日历图标
日历-添加
日历-删除
日历-无效
日历-有效
日历
日历
评论图标
评论
评论组
评论
评论组
评论
评论
邮箱图标
收件箱
回复
回复-全部
信封
信封
信封
信封
信封
聋哑图标
耳聋
盲文
盲人
听力辅助
手语
低视力
沙漏图标
沙漏
沙漏-开始
沙漏-半
沙漏-结束
沙漏
窗口图标
关闭
关闭
最大化
最小化
窗口
旋转图标
圆形-缺口
齿轮
刷新
加载
图表图标
图表
折线图
饼图
线图
商标图标
Pied
返回上页
QQ群
咨询
温馨提示
公众号
