常见问题

会员服务

原型托管

工具推荐

常用素材

图标推荐

教程分享

交互实例

作品列表

网站首页

AxureUX.com

专注交互原型设计

实用资源

Copyright © www.AxureUX.com, All Rights Reserved.

深圳木卫二科技有限公司  粤ICP备17007397号

微信公众号

搜索关注:AxureUX

联系邮箱

Windir@AxureUX.com

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

QQ交流群

点击查看

售前咨询

QQ交谈

返回顶部

更多使用类问题请看帮助手册

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

Facebook

Facebook

Facebook

Firefox

Flickr

Fonticons

FontAwesome

Forumbee

Foursquare

Get-Pocket

Git

Git

Github

Github

Github

谷歌

谷歌+

谷歌+

Gratipay

Hacker-News

Houzz

HTML5

Instagram

IE

Ioxhost

Joomla

Jsfiddle

Lastfm

Lastfm

Leanpub

Linkedin

Linkedin

Linux

Maxcdn

Meanpath

Medium

Mixcloud

Modx

Odnoklassniki

Odnoklassniki

Opencart

Openid

Opera

Optin-Monster

Pagelines

贝宝

Pied

Pinterest

Pinterest

Pinterest

Product-Hunt

QQ

Rebel

Reddit

Reddit

Reddit

人人网

Safari

Scribd

Sellsy

Share

Share

Shirtsinbulk

Simplybuilt

Skyatlas

Skype

Slack

Slideshare

Soundcloud

Spotify

Stack

Stack

Steam

Steam

Stumbleupon

Stumbleupon

腾讯微博

Trello

Tripadvisor

Tumblr

Tumblr

Twitch

Twitter

Twitter

Viacoin

Vimeo

Vimeo

Vine

Vk

微信

新浪微博

Whatsapp

Wikipedia

Windows

Wordpress

Xing

Xing

Y-Combinator

雅虎

Yelp

Youtube

Youtube

Bandcamp

Eercast

Envira

Etsy

Awesome

Freecodecamp

Gitlab

Glide

Glide

Google

Grav

Instagram

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播放

手势图标

手型-石头

手型-布

手型-剪刀

手型-爬虫

手型-斯波克

手型-指针

手型-和平

手型-下

手型-左

手型-右

手型-上

好评

差评

好评

差评

握手

交通工具

小汽车

出租车

巴士

自行车

摩托车

火车

地铁

轮船

飞机

战斗机

航天飞机

火箭

卡车

文件图标

文件夹

文件夹打开

文件夹

文件夹打开

上传

下载

文件

文件

Pdf

Excel

Ppt

Image

代码

音频

视频

Word

Zip

性别图标

女性

无性

男性

变性

双性

双性

女女

男男

男女

伪娘

伪娘-水平

伪娘-垂直

中性

表单图标

复选框

复选框

圆形

圆形

圆点

减号

加号

减号

加号

方形

方形

形式

支付图标

信用卡

信用卡

Amex

DinersClub

Discover

Jcb

万事达

贝宝

Stripe

Visa

谷歌钱包

货币图标

货币

比特币

人民币

美元

欧元

英镑

新谢克尔

卢比

韩元

卢布

里拉

根西岛镑

根西岛镑

用户图标

女士

男士

儿童

用户

用户

用户

用户

用户组

匿名用户

用户-添加

用户-删除

通讯录

通讯录

名片

名片

证件

证件

徽章

医学图标

救护车

H

心形

心形

心跳

医院

急救箱

听诊器

医生

轮椅

温度计

温度计

温度计

温度计

温度计

温度计

地图图标

旗帜

旗帜

旗帜方格

公路

图钉

指示牌

地图

地图

标记

图钉

排序图标

排序

升序

降序

字母升序

字母降序

数量升序

数量降序

数字升序

数字降序

日历图标

日历-添加

日历-删除

日历-无效

日历-有效

日历

日历

评论图标

评论

评论组

评论

评论组

评论

评论

邮箱图标

收件箱

回复

回复-全部

信封

信封

信封

信封

信封

聋哑图标

耳聋

盲文

盲人

听力辅助

手语

低视力

沙漏图标

沙漏

沙漏-开始

沙漏-半

沙漏-结束

沙漏

窗口图标

关闭

关闭

最大化

最小化

窗口

旋转图标

圆形-缺口

齿轮

刷新

加载

图表图标

图表

折线图

饼图

线图

商标图标

Pied