从4.x版本升级

如果您已经在一个项目中使用了Font Awesome 4，那您准备好升级了吗？5.x版是完全重新设计和编码的。我们已经尽量保持与版本4的相似性，但是在升级时需要注意一些差异。下面将介绍如何让您的图标保持最新和最棒。

使用套件快速轻松地升级

我们的套件包含了4.x版本兼容性工具-该套件可自动为您管理最困难的升级部分。创建一个工具包，将其嵌入代码添加到您的项目中，我们将处理以下事项：

自动映射旧图标名称

套件的4.x版本兼容性工具可处理对旧版本图标名称或已更改别名的任何引用。

始终加载您套件指定的Font Awesome版本

您的项目可能仍具有引用旧字体系列名称的CSS，这是一种较为常见的情况。当您的项目依赖于其他主题或加载了自己的较早版本的Font Awesome插件时，我们将覆盖它们以使用您配置的较新版本的Font Awesome。这也可以确保您设置的所有CSS伪元素规则都使用正确的图标。

从4.x版本到5.x版本有什么变化？

3种不同的图标样式

我们为Font Awesome中的每个图标引入了实心、常规和细体的样式。我们还将品牌图标分为自己的样式/类别，以方便使用。我们需要一种在标记中调用图标时引用特定样式的方法。对于您要使用的每个图标，仍然需要1）指定图标的名称，以及2）使用适当的前缀。 4.x版本仅带有一个前缀-fa。 5.x版本具有四个前缀，可让我们轻松设置任何图标的样式：

New Prefix	Icon Style	SVG + JS Filename	Web Font Filename	Availability
fab	Font Awesome品牌	brands.js	fa-brands-400.*	免费
fas or fa	Font Awesome实心	solid.js	fa-solid-900.*	免费
far	Font Awesome常规	regular.js	fa-regular-400.*	仅专业版
fal	Font Awesome细体	light.js	fa-light-300.*	仅专业版


<i class="fa fa-camera-retro"></i>  <!-- version 4's syntax -->

<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->
<i class="far fa-camera-retro"></i> <!-- example: regular style of camera-retro -->
<i class="fal fa-camera-retro"></i> <!-- example: light style of camera-retro -->

图标名称变更

在5.x版本中，我们删除了别名。每个图标都只有一个正式名称，其中一些名称已经根据我们的新标准和约定进行了调整。

线框图标

同样地，所有具有线框样式（通常以-o结尾）的图标现在都有一个far前缀，并且删除了它们的-o后缀。

手动升级

在5.x版本中，我们删除了别名。每个图标都只有一个正式名称，其中一些名称已经根据我们的新标准和约定进行了调整。

1. 从您的项目中删除Font Awesome 4.x版所有资源和引用，包含整个 fontawesome/ 目录——其中包括网络字体(fontawesome/fonts/), CSS (fontawesome/css), 和预处理选项(fontawesome/less and fontawesome/scss)。如果您的4.x版本使用了CDN，则可以忽略该步骤。接下来，从模板/页面HTML的<head>中删除对4.x版本的CSS或JS的引用，包括对版本4的CDN的所有引用。
2. 参考查阅我们的入门详细信息，设置和添加5.x版本的资源和引用。您现在可以使用我们的工具包、下载并自行托管到服务器，或者通过包管理器安装Font Awesome。
3. 我们为您已经创建了填充文件以用作临时解决方案，直到您有时间进行升级。我们的v4填充程序允许您在将5.x版本的图标映射到当前引用时保留旧4.x版本图标的名称、别名和语法。
4. 更新您在Font Awesome图标周围添加的所有自定义样式，包括您设置的定义Unicode值的规则，这些规则可能会随着CSS伪元素而发生变化。
5. 仔细检查项目的用户界面，不要忘了请工作伙伴喝杯咖啡，让他们浏览项目的页面和视图，以确保所有图标均按预期方式呈现。同样，您的项目的暂存或开发版本也是执行此操作的好地方。

如果要使用它们，则需要在5.x版本参考中添加额外的一行。这是使用5.x版本的CDN的示例：


<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
</head>
<body>
<!-- "close" is an alias to "times", V5 is <i class="fa fa-times"></i> -->
<i class="fa fa-close"></i>

<!-- Renamed to "image", V5 is <i class="fa fa-image"></i> -->
<i class="fa fa-picture"></i>

<!-- Needs the "fab" prefix, V5 <i class="fab fa-twitter"></i> -->
<i class="fa fa-twitter"></i>

<!-- "far" prefix, lose the "-o", V5 <i class="far fa-circle"></i> -->
<i class="fa fa-circle-o"></i>
</body>

v4填充程序可在我们的Web字体+ CSS和SVG + JS框架中使用。如果您使用我们新颖的SVG + JS呈现图标方式，只需将/css/all.css引用切换到/js/all.js以及将/css/v4-shims.css切换到/ js / v4 -shims.js。上面的示例切换为改用我们的SVG + JS框架。


<head>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
</head>
<body>
<!-- your existing version 4 icon references here... -->
</body>

1. 从您的项目中删除Font Awesome 4.x版所有资源和引用，包含整个 fontawesome/ 目录——其中包括网络字体(fontawesome/fonts/), CSS (fontawesome/css), 和预处理选项(fontawesome/less and fontawesome/scss)。如果您的4.x版本使用了CDN，则可以忽略该步骤。接下来，从模板/页面HTML的<head>中删除对4.x版本的CSS或JS的引用，包括对版本4的CDN的所有引用。
2. 参考查阅我们的入门详细信息，设置和添加5.x版本的资源和引用。您现在可以使用我们的工具包、下载并自行托管到服务器，或者通过包管理器安装Font Awesome。
3. 我们为您已经创建了填充文件以用作临时解决方案，直到您有时间进行升级。我们的v4填充程序允许您在将5.x版本的图标映射到当前引用时保留旧4.x版本图标的名称、别名和语法。
4. 更新您在Font Awesome图标周围添加的所有自定义样式，包括您设置的定义Unicode值的规则，这些规则可能会随着CSS伪元素而发生变化。
5. 仔细检查项目的用户界面，不要忘了请工作伙伴喝杯咖啡，让他们浏览项目的页面和视图，以确保所有图标均按预期方式呈现。同样，您的项目的暂存或开发版本也是执行此操作的好地方。

请记住，不要交叉或跨版本使用！与Spengler博士商量之后，我们不建议在项目中同时使用FontAwesome4和5。它将导致CSS过大以及路径冲突，我们不能保证图标会按照您或我们的期望进行渲染。如果您无法删除旧版本的引用，我们建议使用启用了4.x版本兼容性的工具包来帮助解决冲突。

6.更新CSS伪元素规则如果您在4.x版本中使用CSS伪元素，则升级到5.x版本需要大量的手工工作。您需要执行以下步骤：

更新字体值-您需要确保更改字体以引用新版本的Font Awesome 5。
使用每个基于图标的规则设置字体粗细-您还需要设置字体粗细，因为第5版将多种样式映射为不同的粗细。


/* general styling shared between versions */
.icon::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}

/* version 4's styling (using calendar-o) */
.calendar::before {
font-family: FontAwesome;
content: "\f133";
}

/* version 5's styling (using updated regular style of calendar) */
.calendar::before {
font-family: "Font Awesome 5 Free";  /* updated font-family */
font-weight: 400; /* regular style/weight */
content: "\f133";
}

使用SVG + JS时需要额外的步骤

如果您正在使用带有JavaScript框架的SVG，则需要了解并完成几个步骤来启动和运行。

图标名称在4.x版本和5.x版本之间更改

这是根据5.x版本的标准和约定重命名的所有图标的列表。请记住，您需要将4.x版本中的所有品牌图标更改为使用新的fab前缀而不是旧的fa前缀。

Old Icon Name or Alias (Version 4)	New Icon Name (Version 5)	New Icon Prefix	Unicode value
500px	500px	fab	f26e
address-book-o	address-book	far	f2b9
address-card-o	address-card	far	f2bb
adn	adn	fab	f170
amazon	amazon	fab	f270
android	android	fab	f17b
angellist	angellist	fab	f209
apple	apple	fab	f179
area-chart	chart-area	fas	f1fe
arrow-circle-o-down	arrow-alt-circle-down	far	f358
arrow-circle-o-left	arrow-alt-circle-left	far	f359
arrow-circle-o-right	arrow-alt-circle-right	far	f35a
arrow-circle-o-up	arrow-alt-circle-up	far	f35b
arrows	arrows-alt	fas	f0b2
arrows-alt	expand-arrows-alt	fas	f31e
arrows-h	arrows-alt-h	fas	f337
arrows-v	arrows-alt-v	fas	f338
asl-interpreting	american-sign-language-interpreting	fas	f2a3
automobile	car	fas	f1b9
bandcamp	bandcamp	fab	f2d5
bank	university	fas	f19c
bar-chart	bar-chart	far	f080
bar-chart-o	chart-bar	far	f080
bathtub	bath	fas	f2cd
battery	battery-full	fas	f240
battery-0	battery-empty	fas	f244
battery-1	battery-quarter	fas	f243
battery-2	battery-half	fas	f242
battery-3	battery-three-quarters	fas	f241
battery-4	battery-full	fas	f240
behance	behance	fab	f1b4
behance-square	behance-square	fab	f1b5
bell-o	bell	far	f0f3
bell-slash-o	bell-slash	far	f1f6
bitbucket	bitbucket	fab	f171
bitbucket-square	bitbucket	fab	f171
bitcoin	btc	fab	f15a
black-tie	black-tie	fab	f27e
bluetooth	bluetooth	fab	f293
bluetooth-b	bluetooth-b	fab	f294
bookmark-o	bookmark	far	f02e
btc	btc	fab	f15a
building-o	building	far	f1ad
buysellads	buysellads	fab	f20d
cab	taxi	fas	f1ba
calendar	calendar-alt	fas	f073
calendar-check-o	calendar-check	far	f274
calendar-minus-o	calendar-minus	far	f272
calendar-o	calendar	far	f133
calendar-plus-o	calendar-plus	far	f271
calendar-times-o	calendar-times	far	f273
caret-square-o-down	caret-square-down	far	f150
caret-square-o-left	caret-square-left	far	f191
caret-square-o-right	caret-square-right	far	f152
caret-square-o-up	caret-square-up	far	f151
cc	closed-captioning	far	f20a
cc-amex	cc-amex	fab	f1f3
cc-diners-club	cc-diners-club	fab	f24c
cc-discover	cc-discover	fab	f1f2
cc-jcb	cc-jcb	fab	f24b
cc-mastercard	cc-mastercard	fab	f1f1
cc-paypal	cc-paypal	fab	f1f4
cc-stripe	cc-stripe	fab	f1f5
cc-visa	cc-visa	fab	f1f0
chain	link	fas	f0c1
chain-broken	unlink	fas	f127
check-circle-o	check-circle	far	f058
check-square-o	check-square	far	f14a
chrome	chrome	fab	f268
circle-o	circle	far	f111
circle-o-notch	circle-notch	fas	f1ce
circle-thin	circle	far	f111
clipboard	clipboard	far	f328
clock-o	clock	far	f017
clone	clone	far	f24d
close	times	fas	f00d
cloud-download	cloud-download-alt	fas	f381
cloud-upload	cloud-upload-alt	fas	f382
cny	yen-sign	fas	f157
code-fork	code-branch	fas	f126
codepen	codepen	fab	f1cb
codiepie	codiepie	fab	f284
comment-o	comment	far	f075
commenting	comment-dots	fas	f4ad
commenting-o	comment-dots	far	f4ad
comments-o	comments	far	f086
compass	compass	far	f14e
connectdevelop	connectdevelop	fab	f20e
contao	contao	fab	f26d
copyright	copyright	far	f1f9
creative-commons	creative-commons	fab	f25e
credit-card	credit-card	far	f09d
credit-card-alt	credit-card	fas	f09d
css3	css3	fab	f13c
cutlery	utensils	fas	f2e7
dashboard	tachometer-alt	fas	f3fd
dashcube	dashcube	fab	f210
deafness	deaf	fas	f2a4
dedent	outdent	fas	f03b
delicious	delicious	fab	f1a5
deviantart	deviantart	fab	f1bd
diamond	gem	far	f3a5
digg	digg	fab	f1a6
dollar	dollar-sign	fas	f155
dot-circle-o	dot-circle	far	f192
dribbble	dribbble	fab	f17d
drivers-license	id-card	fas	f2c2
drivers-license-o	id-card	far	f2c2
dropbox	dropbox	fab	f16b
drupal	drupal	fab	f1a9
edge	edge	fab	f282
empire	empire	fab	f1d1
envelope-o	envelope	far	f0e0
envelope-open-o	envelope-open	far	f2b6
envira	envira	fab	f299
etsy	etsy	fab	f2d7
eur	euro-sign	fas	f153
euro	euro-sign	fas	f153
exchange	exchange-alt	fas	f362
expeditedssl	expeditedssl	fab	f23e
external-link	external-link-alt	fas	f35d
external-link-square	external-link-square-alt	fas	f360
eye	eye	far	f06e
eye-slash	eye-slash	far	f070
eyedropper	eye-dropper	fas	f1fb
fa	font-awesome	fab	f2b4
facebook	facebook-f	fab	f39e
facebook-f	facebook-f	fab	f39e
facebook-official	facebook	fab	f09a
facebook-square	facebook-square	fab	f082
feed	rss	fas	f09e
file-archive-o	file-archive	far	f1c6
file-audio-o	file-audio	far	f1c7
file-code-o	file-code	far	f1c9
file-excel-o	file-excel	far	f1c3
file-image-o	file-image	far	f1c5
file-movie-o	file-video	far	f1c8
file-o	file	far	f15b
file-pdf-o	file-pdf	far	f1c1
file-photo-o	file-image	far	f1c5
file-picture-o	file-image	far	f1c5
file-powerpoint-o	file-powerpoint	far	f1c4
file-sound-o	file-audio	far	f1c7
file-text	file-alt	fas	f15c
file-text-o	file-alt	far	f15c
file-video-o	file-video	far	f1c8
file-word-o	file-word	far	f1c2
file-zip-o	file-archive	far	f1c6
files-o	copy	far	f0c5
firefox	firefox	fab	f269
first-order	first-order	fab	f2b0
flag-o	flag	far	f024
flash	bolt	fas	f0e7
flickr	flickr	fab	f16e
floppy-o	save	far	f0c7
folder-o	folder	far	f07b
folder-open-o	folder-open	far	f07c
font-awesome	font-awesome	fab	f2b4
fonticons	fonticons	fab	f280
fort-awesome	fort-awesome	fab	f286
forumbee	forumbee	fab	f211
foursquare	foursquare	fab	f180
free-code-camp	free-code-camp	fab	f2c5
frown-o	frown	far	f119
futbol-o	futbol	far	f1e3
gbp	pound-sign	fas	f154
ge	empire	fab	f1d1
gear	cog	fas	f013
gears	cogs	fas	f085
get-pocket	get-pocket	fab	f265
gg	gg	fab	f260
gg-circle	gg-circle	fab	f261
git	git	fab	f1d3
git-square	git-square	fab	f1d2
github	github	fab	f09b
github-alt	github-alt	fab	f113
github-square	github-square	fab	f092
gitlab	gitlab	fab	f296
gittip	gratipay	fab	f184
glass	glass-martini	fas	f000
glide	glide	fab	f2a5
glide-g	glide-g	fab	f2a6
google	google	fab	f1a0
google-plus	google-plus-g	fab	f0d5
google-plus-circle	google-plus	fab	f2b3
google-plus-official	google-plus	fab	f2b3
google-plus-square	google-plus-square	fab	f0d4
google-wallet	google-wallet	fab	f1ee
gratipay	gratipay	fab	f184
grav	grav	fab	f2d6
group	users	fas	f0c0
hacker-news	hacker-news	fab	f1d4
hand-grab-o	hand-rock	far	f255
hand-lizard-o	hand-lizard	far	f258
hand-o-down	hand-point-down	far	f0a7
hand-o-left	hand-point-left	far	f0a5
hand-o-right	hand-point-right	far	f0a4
hand-o-up	hand-point-up	far	f0a6
hand-paper-o	hand-paper	far	f256
hand-peace-o	hand-peace	far	f25b
hand-pointer-o	hand-pointer	far	f25a
hand-rock-o	hand-rock	far	f255
hand-scissors-o	hand-scissors	far	f257
hand-spock-o	hand-spock	far	f259
hand-stop-o	hand-paper	far	f256
handshake-o	handshake	far	f2b5
hard-of-hearing	deaf	fas	f2a4
hdd-o	hdd	far	f0a0
header	heading	fas	f1dc
heart-o	heart	far	f004
hospital-o	hospital	far	f0f8
hotel	bed	fas	f236
hourglass-1	hourglass-start	fas	f251
hourglass-2	hourglass-half	fas	f252
hourglass-3	hourglass-end	fas	f253
hourglass-o	hourglass	far	f254
html5	html5	fab	f13b
id-badge	id-badge	far	f2c1
id-card-o	id-card	far	f2c2
ils	shekel-sign	fas	f20b
image	image	far	f03e
imdb	imdb	fab	f2d8
inr	rupee-sign	fas	f156
instagram	instagram	fab	f16d
institution	university	fas	f19c
internet-explorer	internet-explorer	fab	f26b
intersex	transgender	fas	f224
ioxhost	ioxhost	fab	f208
joomla	joomla	fab	f1aa
jpy	yen-sign	fas	f157
jsfiddle	jsfiddle	fab	f1cc
keyboard-o	keyboard	far	f11c
krw	won-sign	fas	f159
lastfm	lastfm	fab	f202
lastfm-square	lastfm-square	fab	f203
leanpub	leanpub	fab	f212
legal	gavel	fas	f0e3
lemon-o	lemon	far	f094
level-down	level-down-alt	fas	f3be
level-up	level-up-alt	fas	f3bf
life-bouy	life-ring	far	f1cd
life-buoy	life-ring	far	f1cd
life-ring	life-ring	far	f1cd
life-saver	life-ring	far	f1cd
lightbulb-o	lightbulb	far	f0eb
line-chart	chart-line	fas	f201
linkedin	linkedin-in	fab	f0e1
linkedin-square	linkedin	fab	f08c
linode	linode	fab	f2b8
linux	linux	fab	f17c
list-alt	list-alt	far	f022
long-arrow-down	long-arrow-alt-down	fas	f309
long-arrow-left	long-arrow-alt-left	fas	f30a
long-arrow-right	long-arrow-alt-right	fas	f30b
long-arrow-up	long-arrow-alt-up	fas	f30c
mail-forward	share	fas	f064
mail-reply	reply	fas	f3e5
mail-reply-all	reply-all	fas	f122
map-marker	map-marker-alt	fas	f3c5
map-o	map	far	f279
maxcdn	maxcdn	fab	f136
meanpath	font-awesome	fab	f2b4
medium	gratipay	fab	f23a
meetup	meetup	fab	f2e0
meh-o	meh	far	f11a
minus-square-o	minus-square	far	f146
mixcloud	mixcloud	fab	f289
mobile	mobile-alt	fas	f3cd
mobile-phone	mobile-alt	fas	f3cd
modx	modx	fab	f285
money	money-bill-alt	far	f3d1
moon-o	moon	far	f186
mortar-board	graduation-cap	fas	f19d
navicon	bars	fas	f0c9
newspaper-o	newspaper	far	f1ea
object-group	object-group	far	f247
object-ungroup	object-ungroup	far	f248
odnoklassniki	odnoklassniki	fab	f263
odnoklassniki-square	odnoklassniki-square	fab	f264
opencart	opencart	fab	f23d
openid	openid	fab	f19b
opera	opera	fab	f26a
optin-monster	optin-monster	fab	f23c
pagelines	pagelines	fab	f18c
paper-plane-o	paper-plane	far	f1d8
paste	clipboard	far	f328
pause-circle-o	pause-circle	far	f28b
paypal	paypal	fab	f1ed
pencil	pencil-alt	fas	f303
pencil-square	pen-square	fas	f14b
pencil-square-o	edit	far	f044
photo	image	far	f03e
picture-o	image	far	f03e
pie-chart	chart-pie	fas	f200
pied-piper	pied-piper	fab	f2ae
pied-piper-alt	pied-piper-alt	fab	f1a8
pied-piper-pp	pied-piper-pp	fab	f1a7
pinterest	pinterest	fab	f0d2
pinterest-p	pinterest-p	fab	f231
pinterest-square	pinterest-square	fab	f0d3
play-circle-o	play-circle	far	f144
plus-square-o	plus-square	far	f0fe
product-hunt	product-hunt	fab	f288
qq	qq	fab	f1d6
question-circle-o	question-circle	far	f059
quora	quora	fab	f2c4
ra	rebel	fab	f1d0
ravelry	ravelry	fab	f2d9
rebel	rebel	fab	f1d0
reddit	reddit	fab	f1a1
reddit-alien	reddit-alien	fab	f281
reddit-square	reddit-square	fab	f1a2
refresh	sync	fas	f021
registered	registered	far	f25d
remove	times	fas	f00d
renren	renren	fab	f18b
reorder	bars	fas	f0c9
repeat	redo	fas	f01e
resistance	rebel	fab	f1d0
rmb	yen-sign	fas	f157
rotate-left	undo	fas	f0e2
rotate-right	redo	fas	f01e
rouble	ruble-sign	fas	f158
rub	ruble-sign	fas	f158
ruble	ruble-sign	fas	f158
rupee	rupee-sign	fas	f156
s15	bath	fas	f2cd
safari	safari	fab	f267
scissors	cut	fas	f0c4
scribd	scribd	fab	f28a
sellsy	sellsy	fab	f213
send	paper-plane	fas	f1d8
send-o	paper-plane	far	f1d8
share-square-o	share-square	far	f14d
shekel	shekel-sign	fas	f20b
sheqel	shekel-sign	fas	f20b
shield	shield-alt	fas	f3ed
shirtsinbulk	shirtsinbulk	fab	f214
sign-in	sign-in-alt	fas	f2f6
sign-out	sign-out-alt	fas	f2f5
signing	sign-language	fas	f2a7
simplybuilt	simplybuilt	fab	f215
skyatlas	skyatlas	fab	f216
skype	skype	fab	f17e
slack	slack	fab	f198
sliders	sliders-h	fas	f1de
slideshare	slideshare	fab	f1e7
smile-o	smile	far	f118
snapchat	snapchat	fab	f2ab
snapchat-ghost	snapchat-ghost	fab	f2ac
snapchat-square	snapchat-square	fab	f2ad
snowflake-o	snowflake	far	f2dc
soccer-ball-o	futbol	far	f1e3
sort-alpha-asc	sort-alpha-down	fas	f15d
sort-alpha-desc	sort-alpha-up	fas	f15e
sort-amount-asc	sort-amount-down	fas	f160
sort-amount-desc	sort-amount-up	fas	f161
sort-asc	sort-up	fas	f0de
sort-desc	sort-down	fas	f0dd
sort-numeric-asc	sort-numeric-down	fas	f162
sort-numeric-desc	sort-numeric-up	fas	f163
soundcloud	soundcloud	fab	f1be
spoon	utensil-spoon	fas	f2e5
spotify	spotify	fab	f1bc
square-o	square	far	f0c8
stack-exchange	stack-exchange	fab	f18d
stack-overflow	stack-overflow	fab	f16c
star-half-empty	star-half	far	f089
star-half-full	star-half	far	f089
star-half-o	star-half	far	f089
star-o	star	far	f005
steam	steam	fab	f1b6
steam-square	steam-square	fab	f1b7
sticky-note-o	sticky-note	far	f249
stop-circle-o	stop-circle	far	f28d
stumbleupon	stumbleupon	fab	f1a4
stumbleupon-circle	stumbleupon-circle	fab	f1a3
sun-o	sun	far	f185
superpowers	superpowers	fab	f2dd
support	life-ring	far	f1cd
tablet	tablet-alt	fas	f3fa
tachometer	tachometer-alt	fas	f3fd
telegram	telegram	fab	f2c6
television	tv	fas	f26c
tencent-weibo	tencent-weibo	fab	f1d5
themeisle	themeisle	fab	f2b2
thermometer	thermometer-full	fas	f2c7
thermometer-0	thermometer-empty	fas	f2cb
thermometer-1	thermometer-quarter	fas	f2ca
thermometer-2	thermometer-half	fas	f2c9
thermometer-3	thermometer-three-quarters	fas	f2c8
thermometer-4	thermometer-full	fas	f2c7
thumb-tack	thumbtack	fas	f08d
thumbs-o-down	thumbs-down	far	f165
thumbs-o-up	thumbs-up	far	f164
ticket	ticket-alt	fas	f3ff
times-circle-o	times-circle	far	f057
times-rectangle	window-close	fas	f410
times-rectangle-o	window-close	far	f410
toggle-down	caret-square-down	far	f150
toggle-left	caret-square-left	far	f191
toggle-right	caret-square-right	far	f152
toggle-up	caret-square-up	far	f151
trash	trash-alt	fas	f2ed
trash-o	trash-alt	far	f2ed
trello	trello	fab	f181
tripadvisor	tripadvisor	fab	f262
try	lira-sign	fas	f195
tumblr	tumblr	fab	f173
tumblr-square	tumblr-square	fab	f174
turkish-lira	lira-sign	fas	f195
twitch	twitch	fab	f1e8
twitter	twitter	fab	f099
twitter-square	twitter-square	fab	f081
unsorted	sort	fas	f0dc
usb	usb	fab	f287
usd	dollar-sign	fas	f155
user-circle-o	user-circle	far	f2bd
user-o	user	far	f007
vcard	address-card	fas	f2bb
vcard-o	address-card	far	f2bb
viacoin	viacoin	fab	f237
viadeo	viadeo	fab	f2a9
viadeo-square	viadeo-square	fab	f2aa
video-camera	video	fas	f03d
vimeo	vimeo-v	fab	f27d
vimeo-square	vimeo-square	fab	f194
vine	vine	fab	f1ca
vk	vk	fab	f189
volume-control-phone	phone-volume	fas	f2a0
warning	exclamation-triangle	fas	f071
wechat	weixin	fab	f1d7
weibo	weibo	fab	f18a
weixin	weixin	fab	f1d7
whatsapp	whatsapp	fab	f232
wheelchair-alt	accessible-icon	fab	f368
wikipedia-w	wikipedia-w	fab	f266
window-close-o	window-close	far	f410
window-maximize	window-maximize	far	f2d0
window-restore	window-restore	far	f2d2
windows	windows	fab	f17a
won	won-sign	fas	f159
wordpress	wordpress	fab	f19a
wpbeginner	wpbeginner	fab	f297
wpexplorer	wpexplorer	fab	f2de
wpforms	wpforms	fab	f298
xing	xing	fab	f168
xing-square	xing-square	fab	f169
y-combinator	y-combinator	fab	f23b
y-combinator-square	hacker-news	fab	f1d4
yahoo	yahoo	fab	f19e
yc	y-combinator	fab	f23b
yc-square	hacker-news	fab	f1d4
yelp	yelp	fab	f1e9
yen	yen-sign	fas	f157
yoast	yoast	fab	f2b1
youtube	youtube	fab	f167
youtube-play	youtube	fab	f167
youtube-square	youtube-square	fab	f431

下一步

遇到麻烦了吗？请查看我们的疑难解答指南，以获取有关在网络上使用Font Awesome的常见问题的答案。可以了？那请享受添加到5.x版本中的所有新图标。

自主托管Font Awesome

在本地构建和投入生产时，您是否更需要获得Font Awesome副本并在您自己项目的源代码中使用？如果您在一个代码库中有许多站点或应用程序，或者想要为工作流程自定义Font Awesome的某些部分，那么自己下载和托管Font Awesome则非常实用。

您已经下载了一份副本？

确保您已下载针对特定网站的文件副本。您需要它来完成我们将要完成以下的操作。

您的下载包含了些什么？

面向Web的Font Awesome软件包包含以下目录和文件：

Files & Folders	What They Are	Where You Should Start
/css	Web字体的样式表	all.css
/js	带有JavaScript的SVG	all.js
/less	Less预处理器	fontawesome.less
/scss	Sass预处理器	fontawesome.scss
/sprites	SVG精灵	solid.svg
/svgs	图标独立使用的SVG	individual *.svg icons
/webfonts	CSS使用的Web字体文件	See /css

在CSS中使用Web字体

/css/all.css文件包含核心样式以及使用Font Awesome时所需的所有图标样式。 /webfonts文件夹包含上述CSS引用并依赖的所有字体文件。

将整个/webfonts文件夹和/css/all.css复制到项目的静态资源目录（或您希望保留前端资源或vendor的文件夹）中。

将对复制的/css/all.css文件的引用添加到要在其上使用Font Awesome的每个模板或页面的<head>中。


<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

需要使用CSS预处理程序？

需要使用我们捆绑在下载中的/scss或/less版本的Font Awesome吗？请查看我们的Sass和Less文档，以获取有关其内容的详细信息。将它们编译成CSS后，您可以按照此处所述的以CSS为重点的步骤来处理托管和引用图标。

将SVG与JavaScript结合使用

/js/all.js会加载所有基本功能，以及使用Font Awesome时所需的所有图标样式。将其复制到项目的静态资源目录（或者您希望保留前端资源或vender的文件夹）。

在要使用Awesome的每个模板或页面的<head>内，添加对复制的/js/all.js文件的引用。


<head>
<script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

仔细检查您的路径

由于您自己管理所有下载的文件，因此请确保页面<head>中的引用与您在项目中移动了Font Awesome所有文件的正确位置。

仅使用某些样式

在将Web字体与CSS框架一起使用时，是否只想使用某些样式的图标？ /css文件夹包含Font Awesome的所有样式选项（实心、常规、细体和品牌）的核心样式和其他文件。 /webfonts文件夹包含上述CSS引用并依赖的所有字体文件。

Icon Style	Web Font Filename	CSS Filename	Availability
Font Awesome品牌	fa-brands-400.*	brands.css	免费
Font Awesome实心	fa-solid-900.*	solid.css	免费
Font Awesome常规	fa-regular-400.*	regular.css	仅专业版
Font Awesome细体	fa-light-300.*	light.css	仅专业版

将/webfonts和/css文件夹都复制到项目的静态资源目录（或者您希望保留前端资源或vendor的位置）中。您可以根据需要删除不打算使用的任何样式的.css和网络字体文件。

在要使用Font Awesome的每个模板或页面的<head>中，添加对核心样式文件（/css/fontawesome.css）和单个样式的CSS（例如/css/brands.css）的引用。请留意项目的路径以及上一步中将文件移动到的位置。


<head>
<!-- Our project just needs Font Awesome Solid + Brands -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>

注意网络字体的路径

我们建议将/webfonts和/css文件夹保留在同一目录中。因为如果不这样做，则需要更改每种样式的CSS文件中提到的网络字体的路径。

在将我们的SVG与JS框架一起使用时，是否只想使用某些样式？ /js文件夹包含Font Awesome的所有样式选项（实心，常规，细体和品牌）的核心样式和其他文件。

Icon Style	JS Filename	Availability
Font Awesome品牌	brands.js	免费
Font Awesome实心	solid.js	免费
Font Awesome常规	regular.js	仅专业版
Font Awesome细体	light.js	仅专业版

将您要使用的fontawesome.js加载程序和任何图标样式的.js文件复制到项目的静态资源目录（或者您希望保留前端资源或vendor的位置）中。我们建议最后引用fontawesome.js加载程序。


<head>
<!-- Our project just needs Font Awesome Solid + Brands -->
<script defer src="/your-path-to-fontawesome/js/brands.js"></script>
<script defer src="/your-path-to-fontawesome/js/solid.js"></script>
<script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="fab fa-github-square"></i> <!-- uses brand style -->
</body>

仔细检查路径

由于您自己管理所有下载的文件，因此请确保页面<head>中的引用与您在项目中移动了Font Awesome的所有文件的位置正确。

下一步

完成引用以后，您现在可以开始引用模板或页面的<body>中的图标，然后查看我们打包到已加载的支持文件中的所有样式支持。

使用包管理器

对于您和您的团队来说，npm和yarn这样的软件包管理器可能是熟悉的工具。有了它们，您可以轻松地升级到新版本的Font Awesome。

Font Awesome包中有什么？

面向Web的Font Awesome软件包包含以下目录和文件：

Path	What It Is	Where You Should Start
/css	Web字体的样式表	all.css
/js	带有JavaScript的SVG	all.js
/less	Less预处理器	fontawesome.less
/scss	Sass预处理器	fontawesome.scss
/sprites	SVG精灵	solid.svg
/svgs	图标独立使用的SVG	individual *.svg icons
/webfonts	CSS使用的Web字体文件	See /css

安装免费版的Font Awesome

您可以通过npm或yarn轻松安装Font Awesome的最新免费版本：


npm install --save-dev @fortawesome/fontawesome-free


yarn add --dev @fortawesome/fontawesome-free

安装专业版的Font Awesome

要访问包含更多图标和样式的专业版软件包，需要您配置@fortawesome范围以使用我们的Pro NPM注册表。

您需要专业订阅才能使用它们！

专业版软件包是通过专业版订阅获得的额外服务的一部分。通过获得对它们的使用权，来得到更多不同样式的图标、额外服务以及专业支持。

关于如何配置@fortawesome范围以使用我们的Pro NPM注册表，您有两个选择：

全局设置-全局设置这些值，使其可以在任何项目中使用：


npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken" TOKEN

单个项目-如果您希望对单个项目进行设置（对于团队和CI/CD来说是很不错的选择），请在项目的根目录（或您的package.json文件所在的位置）中创建一个.npmrc文件：


@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=TOKEN

配置完成后，您可以通过npm或yarn安装最新的Pro Awesome Pro版本：


npm install --save-dev @fortawesome/fontawesome-pro


yarn add --dev @fortawesome/fontawesome-pro

环境变量-您还可以利用NPM的环境变量替换：


@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}


FONTAWESOME_NPM_AUTH_TOKEN=TOKEN npm install --save-dev @fortawesome/fontawesome-pro

我们正在逐步淘汰npm注册表身份验证的旧方法

旧方法只设置了一个将服务器地址和令牌组合在一起的配置密钥。这种新方法设置了两个不同的配置密钥：一个用于服务器地址，第二个用于令牌。如果您当前正在使用旧方法，请将您的配置更新为新方法。

下一步

引用/css/all.css或/js/all.js，要使用Font Awesome的每个模板或页面的<head>中使用Font Awesome所需的所有内容都包含在内。执行此操作时，请注意安装软件包的路径。

下一步

如果您只想使用特定样式，而不是我们在Web字体和SVG框架中包含的默认所有选项，请参考要使用的特定样式，例如fa-brands或fa-regular。

安装完毕后，请查看我们的图标，并了解如何在HTML中引用它们。

基本用法

您可以使用样式前缀和图标名称将“Font Awesome”图标放置在几乎任何地方。我们努力达到这一目标，以使图标具有这些特征并自然地与文本显示在一起。

Font Awesome旨在与内联元素一起使用，我们建议使用一致的HTML元素以在项目中引用它们。我们喜欢<i>标签的简洁性，因为最近大多数人都在使用<em> </em>来强调/斜体化语义文本。如果那不是您的理想之选，那么在语义上使用<span>更为正确。

您需要知道两点信息才能引用一个图标：1.以fa-为前缀的名称；2.要使用的相应前缀的样式。


<div></div><!-- html代码需要转义 -->
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->

Style	Availability	Style Prefix	Example	Rendering
实心	免费	fas	<i class="fas fa-camera"></i>	Rendering
细体	仅专业版	fal	<i class="fal fa-camera"></i>	Rendering
双色	仅专业版	fad	<i class="fad fa-camera"></i>	Rendering
品牌	免费	fab	<i class="fab fa-font-awesome"></i>	Rendering

fa前缀在5.x版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。

由于Font Awesome首次实现并继续支持使用CSS @font-face方法进行渲染，因此其每种样式都对应于特定的字体粗细：

Style	Availability	@font-face weight
实心	免费	900
常规	仅专业版	400
细体	免费	300
双色	仅专业版	900
品牌	免费	400

为什么需要字体粗细值？尽管使用<i>或其他HTML元素是呈现图标的最流行和最简便的方法，但是如果您希望具有额外的标记，我们确实有使用自定义书面CSS伪元素的高级方法。字体粗细与该技术一起使用，是设置图标样式的最佳方式。

使用Font Awesome中的连字尽管我们的桌面工作流程利用连字功能使您可以轻松地将图标插入您喜欢的设计和演示应用程序以及SVG + JS框架中，但连字查找表会占用额外的文件空间，并可能导致性能问题。在获得用于子集图标的选项和解决方案之前，我们不愿意考虑使用Web字体+ CSS的连字。

Font Awesome图标+您项目的样式

Font Awesome图标会自动继承CSS大小和颜色。这意味着无论您将它们放在何处，它们都与内联文本混合在一起。 Font Awesome会尽量不增加复杂的设置，只在上下文中正确呈现的基本样式规则。


<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>
</span>

<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span>

其他样式选项

虽然引用图标的基本方法很简单，那是希望它足够简单明了，但我们也为图标的大小、对齐、旋转和变换图标提供了支持。

您还可以通过在项目代码中添加自己的CSS规则，将自己的自定义样式添加到Font Awesome图标中。这是一个简单的例子。


<head>
<!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

<!-- custom styling for all icons -->
i.fas,
i.fab {
border: 1px solid red;
}

<!-- custom styling for specific icons -->
.fa-fish {
color: salmon;
}

.fa-frog {
color: green;
}

.fa-user-ninja.vanished {
opacity: 0.0;
}

.fa-facebook {
color: rgb(59, 91, 152);
}
</head>
<body>
<i class="fas fa-fish"></i>
<i class="fas fa-frog"></i>
<i class="fas fa-user-ninja vanished"></i>
<i class="fab fa-facebook"></i>
</body>

使用SVG + JS框架编写自定义CSS使用我们的SVG框架时，请记住，默认情况下，基于Font Awesome的<i> DOM元素将替换为新的<svg>元素。请确保您的CSS规则对应正确的元素。

图标备忘表

既然您已经设置好了所有内容，并且知道如何引用图标，在线文档将使您能够很容易地使用一些帮助来查找和插入图标。

内置于我们的图标表中

在我们的图标库和搜索列表中，我们提供了一种快速的方法，可以为列出的每个图标打开或关闭一些额外信息。这些额外的信息包括每个图标的名称、Unicode字符值和一个将图标复制为字形的控件。

切换Font Awesome图标列表视图上的“显示备忘单”按钮

切换后，您将看到有关每个图标的额外信息

关于备忘单

从4.x版本开始，我们就有一个专用的备忘单视图，它包含了我们图标库/搜索视图中所有图标的所有信息。此备忘单可以通过打印设置保存为PDF格式，以便在脱机或希望与团队共享图标列表时轻松搜索和查找。

备忘表包含所有图标的信息，涵盖免费版和专业版

每个图标都有自己的名称、渲染样式和unicode值

那么，我何时以及如何使用这些图标信息？

这些帮助信息可用于网页和桌面工作流。以下是每一条信息用处。

Icon Information	What it’s good for
Name	Referencing the icon in HTML (e.g. <i class="fas fa-[NAME]"></i>) or for when using ligatures on the desktop
Unicode	For using CSS pseudo elements to render icons
Glyph	For copying and pasting into a text layer on the desktop or as an alternative way to reference an icon on the web (e.g. <i class="fas">[GLYPH]</i>) into

图标尺寸

我们的Web字体 + CSS和SVG + JS框架都包含一些基本控件，可用于在页面UI中调整图标的大小。

相对尺寸

图标继承了其父容器的字体大小，从而使它们可以匹配您所呈现的任何文本。通过以下类，我们可以相对于继承的font-size增大或减小图标的大小。


<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

这里还有一些示例，您可以在其中查看相对比例。


<div style="font-size: 0.5rem;">
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
</div>


<div style="font-size: 24px;">
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
</div>

您知道吗？通过在目标图标的项目CSS中、或直接在引用图标的HTML元素的style属性中设置字体大小，您还可以直接设置图标的大小。

Class	Size	Other Notes
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em	Also applies vertical-align: -25%
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

进阶尺寸定制如果您使用的是我们的SCSS或Less CSS预处理器，则可以根据自己的比例调整_larger.scss或_larger.less部分。

固定宽度

是否需要垂直对齐一系列图标，例如列表或导航菜单中的图标？对于这些情况，我们提供了固定宽度的样式支持。

在引用您的图标的HTML元素上添加fa-fw类，以将一个或多个图标设置为相同的固定宽度。当更改图标宽度（例如，宽而短的图标上方的高而瘦的图标）会使得所有图标垂直对齐时，这个功能非常有用。为了清晰，在下面的示例中，我们在图标上添加了背景色，以便您可以看到固定的宽度，还可以增大父元素的字体大小。

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow


<div style="font-size: 2rem;">
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

列表中的图标

在固定宽度样式的垂直对齐的基础上，我们添加了一些实用样式，以处理带有用作装饰项目符号的图标的HTML列表。

使用fa-ul和fa-li替换无序列表中的默认项目符号。

List icons can
be used to
replace bullets
in lists


<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

List icons can
be used to
replace bullets
in lists


<ol class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ol>

旋转

有时您需要旋转、翻转或镜像图标才能在项目或设计中达到期望的效果。我们提供了一些快速实用的工具来帮助您解决此问题。

若要任意旋转和翻转图标，请在引用图标时使用fa-rotate- *和fa-flip- *类。


<div class="fa-4x">
<i class="fas fa-snowboarding"></i>
<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>
<i class="fas fa-snowboarding fa-rotate-270"></i>
<i class="fas fa-snowboarding fa-flip-horizontal"></i>
<i class="fas fa-snowboarding fa-flip-vertical"></i>
<i class="fas fa-snowboarding fa-flip-both"></i>
</div>

旋转类

Class	Rotation Amount	Other Notes
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	mirrors icon horizontally
fa-flip-vertical	mirrors icon vertically
fa-flip-both	mirrors icon vertically and horizontally (requires 5.7.0 or greater)

旋转时需要更多控制吗？我们的SVG + JS框架包含一个强大的转换功能，更精细地旋转图标！如果您打算这样使用Font Awesome，那就试试看。

图标动画

需要加载或状态通信图标来旋转吗？那就对了。我们在支持样式中包括了一些基本的动画供您使用。

使用fa-spin类使任何图标旋转，或者使用fa-pulse使其进行8方向旋转。特别适用于fa-spinner和旋转图标类别中的所有内容。


<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
</div>

图标动画+摆动

我们一直在努力使图标在旋转或搏动时保持完美居中。但是，我们发现一些浏览器和Web字体 + Font Awesome的CSS版本存在问题。经过大量调查，这似乎是Web字体的普遍问题，而不是我们可以直接解决的问题。我们确实有几种方法可以解决此问题：

切换框架-切换到带有JavaScript版本的SVG，这样做效果更好。
设置动画图标的显示-使用 display: block; 。这似乎对解决此问题有很大帮助。

边框+拖动图标

有时，您可能希望将文本环绕在图标上，或在带有边框的视觉上加以区分。以下是我们提供的样式支持。

使用fa-border和fa-pull-right或fa-pull-left可以轻松获得引号或文章图标。

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.


<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

将fa-border与拉动的图标样式结合使用可实现更直观的分隔。


<i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>
Gatsby believed in the green light, the orgastic future that year by year recedes before us.
It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

堆叠

您可以通过Font Awesome附带的支持样式轻松地堆叠图标。

要堆叠多个图标，请在要堆叠的2个图标的父HTML元素上使用fa-stack类。然后为常规尺寸的图标添加fa-stack-1x类，为较大的图标添加fa-stack-2x类。 fa-inverse可以与fa-stack-1x一起添加到图标中，以帮助实现剔除效果。您甚至可以在父级上抛出较大的图标类，以进一步控制大小。


<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

对齐堆叠和常规图标

您可以在单个图标旁边使用堆叠的图标。由于堆叠图标由我们框架随附的CSS设置为单个图标大小的两倍，因此您需要缩小堆叠图标的大小或放大单个图标的大小。


<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle fa-2x"></i>

需要一些自定义CSS如果需要更改堆叠图标的默认字体大小，则需要编写自己的自定义规则（默认情况下，堆叠图标设置为display：inline-block; vertical-align：middle; ）。


<style>
.fa-stack { font-size: 0.5em; }
i { vertical-align: middle; }
</style>

<i class="far fa-circle"></i>
<span class="fa-stack">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<i class="far fa-circle"></i>

堆叠时需要更多加强效果吗？我们的SVG + JS框架提供了强大的遮罩和分层方法，可以更精细地旋转图标！如果您打算这样使用Font Awesome，那就试试看。

小心！此功能要求您使用我们的SVG + JS版本的Font Awesome。

强化变形

^NEW

借助Font Awesome 5中SVG的强大功能，现在您可以使用data-fa-transform元素属性任意缩放、定位、翻转和旋转图标。您甚至可以将它们组合起来以获得一些超级有用的效果。

缩放比例

强化变形的缩放会影响图标大小，而无需更改或移动容器。要按比例放大或缩小图标，请使用带有任意值（包括小数）的grow-＃和shrink-＃。单位是1/16em。为了清晰，在示例中，我们在图标上添加了背景色，以便您可以看到效果。


<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-seedling" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

定位

强化变形的位置会影响图标的位置，而无需更改或移动容器。要向上，向下，向左或向右移动图标，请使用up-#，down-#，left-＃和right-＃及其任意值，包括小数。单位是1/16em。为了清晰，在示例中，我们在图标上添加了背景色，以便您可以看到效果。


<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

旋转和翻转

强化变形的旋转和翻转会影响图标的角度和反射，而无需更改或移动容器。要旋转或翻转图标，请使用带有任意值的rotation-＃，flip-v和flip-h的任意组合。单位是允许带负数的度（请参见示例中的第五个图标）。为了清晰，在示例中，我们在图标上添加了背景色，以便您可以看到效果。


<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

您知道吗？您可以在单个图标上混合并匹配上面提到的强化变形。

小心！此功能要求您使用我们的SVG + JS版本的Font Awesome。

图标遮罩

^NEW

借助Font Awesome 5中SVG的强大功能，将两个图标结合起来可以创建一种单色形状！将其与我们的强化变形结合使用可产生一些非常棒的效果。

当您想要显示背景色时，遮罩非常有用。为了清晰，在示例中，我们在图标上添加了背景色，以便您可以看到效果。


<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
<i class="fas fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
</div>

Masking components	How it works
内部图标（删除）	使用经典的类属性进行设置。使用任何data-fa-transform属性进行转换。
外部图标	使用“内部图标”上的data-fa-mask属性进行设置。

小心！此功能要求您使用我们的SVG + JS版本的Font Awesome。

分层、文本和计数器

^NEW

图层是一种将图标和文本视觉上彼此叠加的新方法，取代了我们的经典图标堆栈。通过这种新方法，您可以使用2个以上的图标。

当您不希望显示页面背景时，或者当您想使用多种颜色，在图标上分层放置多个图标，在文本上放置文本或在计数器上使用多个图层计数器时，这些图层就非常有用。为了清晰，在示例中，我们在图层上添加了背景色，以便您可以看到效果。

27 NEW 1,419


<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>

Layering components	How it works
fa-layers	包装您的图标或文字堆栈。您可能还希望添加fa-fw类，以便您的图层对齐。
Inner icons	直接在fa-layers元素内添加任意数量的图标。图标与顶部的最后一个图标堆叠在一起。
fa-layers-text	在fa-layers元素内添加以将文本放在图标顶部。与data-fa-transform结合使用可实现完全控制。
fa-layers-counter	在图标的右上方添加一个计数器。可以使用fa-layers-bottom-left，fa-layers-bottom-right，fa-layers-top-left和默认的fa-layers-top-right来定位。溢出文本用省略号截断。

在开始之前，请确保您查看以下内容： 您已经在项目中设置了Font Awesome。如果没有，最快的方法是制作一个工具包。 n您熟悉Font Awesome图标的基本用法。 n您正在使用Font Awesome 5.10.0或更高版本 n您拥有一个可以访问5.10.0或更高版本的专业版 n

双色图标

^NEW

双色图标就像我们所有其他图标一样工作。最重要的是，它们提供了Font Awesome中每个图标的版本，该图标具有两种不同的颜色。它们非常适合为您的项目中的图标添加更多品牌或插图品质。

基本用法

双色图标使用相同的语法Font Awesome图标，并且可以使用其特定样式前缀（fad）像其他任何图标一样进行引用。


<div class="fa-3x">
<i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fad fa-fill-drip"></i> <!-- a duotone style fill-drip icon -->
</div>

交换图层透明度

您可以交换每个双色图标图层的默认透明度。这将使图标的主要层的默认不透明度为40％。


<div class="fa-3x">
<i class="fad fa-camera"></i> <!-- a duotone style camera icon -->
<i class="fad fa-camera fa-swap-opacity"></i> <!-- a duotone style camera icon with swapped opacity -->

<i class="fad fa-fire-alt"></i> <!-- a duotone style fire-alt icon -->
<i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- a duotone style fire-alt icon with swapped opacity -->

<i class="fad fa-bus-alt"></i> <!-- a duotone style bus-alt icon -->
<i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- a duotone style bus-alt icon with swapped opacity -->
</div>

轮到你了！试试Codepen上的这些透明度交换示例。

改变透明度

默认情况下，双色图标中的辅助图层设置为40％不透明度（通过Font Awesome支持CSS规则 opacity 0.4；）。您可以使用下面的CSS自定义属性来明确设置双色调图标图层的透明度。这是一些设置它们的地方。

Properties	CSS Custom Property	Accepted Values
设置主要层透明度	--fa-primary-opacity	0 1.0
设置次要层透明度	--fa-secondary-opacity	0 1.0


<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.20"></i> <!--  secondary layer's opacity set to 20% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.40"></i> <!--  secondary layer's opacity set to 40% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.60"></i> <!--  secondary layer's opacity set to 60% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 0.80"></i> <!--  secondary layer's opacity set to 80% -->
<i class="fad fa-bus-alt" style="--fa-secondary-opacity: 1.0"></i> <!--  secondary layer's opacity set to 100% -->
</div>


<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!--  primary layer's opacity set to 20% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!--  primary layer's opacity set to 40% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!--  primary layer's opacity set to 60% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!--  primary layer's opacity set to 80% -->
<i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!--  primary layer's opacity set to 100% -->
</div>

轮到你了！让我们确保这个概念是超级“透明的”。尝试修改这些不同的不透明度示例。

为双色图标着色

像所有其他“Font Awesome”图标一样，双色图标会自动继承CSS大小和颜色。双色图标由主要层和次要层组成。默认情况下，次要层的不透明度为40％，因此它会以图标继承或直接设置的颜色的浅色显示。

使用CSS自定义属性，我们还在双色图标的主要层和辅助图层上添加了一些颜色钩子。这是一些设置它们的地方。

Properties	CSS Custom Property	Accepted Values
设置主要层透明度	--fa-primary-color	Any valid CSS colorvalue
设置次要层透明度	--fa-secondary-color	Any valid CSS colorvalue


<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!-- primary layer color defined -->
<i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- secondary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
<i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
<i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>

轮到你了！这是一个Codepen，其中包含一些着色示例供您使用cray-cray（ola）。

进阶使用

当您将所有着色、不透明度和其他选项组合在一起时，“Font Awesome”图标将变得更赞。这里有一些关于双色图标如何将您的项目带入更高领域的想法。

使用颜色突出显示图标的一部分或注释状态


<div class="fa-3x">
<i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>

<i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>

<i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
<i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>

创建看起来像插图的全彩图标


<div class="fa-3x">
<i class="fad fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
<i class="fad fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>
<i class="fad fa-birthday-cake" style="--fa-secondary-opacity: 1.0; --fa-primary-color: pink; --fa-secondary-color: palevioletred;"></i>
<i class="fad fa-ear" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sandybrown; --fa-secondary-color: bisque;"></i>
<i class="fad fa-corn" style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;"></i>
<i class="fad fa-cookie-bite" style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;"></i>
</div>

带有品牌视觉色彩的主题图标


<style>
.theme-ravenclaw {
--fa-secondary-opacity: 1.0;
--fa-primary-color: rgb(4, 56, 161);
--fa-secondary-color: rgb(108, 108, 108);
}
</style>

<div class="fa-3x">
<i class="fad fa-hat-wizard theme-ravenclaw"></i>
<i class="fad fa-flask-potion theme-ravenclaw"></i>
<i class="fad fa-wand-magic theme-ravenclaw"></i>
<i class="fad fa-scarf theme-ravenclaw"></i>
<i class="fad fa-book-spells theme-ravenclaw"></i>
</div>

轮到你了！

准备使用“对抗黑暗艺术的高级防御”和使用双色图标吗？这是一些高级示例，您可以从它们开始投射一些真正的双色魔术。是否想在主题方面赢得即将到来的普通巫师考试等级测验？查看更多示例。

在项目中使用

对于大多数人来说，CSS定制属性仍然是一件比较陌生的事情。您可以通过以下几种方法在项目中定义它们…

使用CSS设置属性：root

您可以在CSS：root伪类级别定义双色图标的自定义属性。默认情况下，这将使您包括的任何双色图标都继承属性。


<!-- by default, everything will be in the holiday spirit -->
<style>
:root {
--fa-primary-color: green;
--fa-secondary-color: red;
}
</style>

<i class="fad fa-holly-berry"></i>
<i class="fad fa-wreath"></i>
<i class="fad fa-candy-cane"></i>

使用基于项目的CSS规则设置属性

您还可以在项目的CSS中，页面的<head>或单独的样式表中设置自定义属性。这些属性的作用域仅限于与您所包含的规则选择器匹配的元素。当您可能无法轻松访问项目的原始HTML时，此技术非常适合主题化。


<!-- setting a rule for house styling -->
<style>
.theme-slytherin {
--fa-primary-color: darkgreen;
--fa-secondary-color: silver;
}
</style>

<i class="fad fa-wand-magic theme-slytherin"></i>
<i class="fad fa-scarf theme-slytherin"></i>
<i class="fad fa-book-spells theme-slytherin"></i>

使用内联样式设置属性

文档中的许多示例都通过向元素添加样式属性来使用内联样式定义CSS自定义属性。这最适合一次性使用或非常自定义的彩色/样式双色图标，您无需进行全局更改。


<!-- using inline styles to define duotone icon custom properties -->
<i class="fad fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>

注意特异性和级联！重新定义的CSS自定义属性将彼此覆盖。在：root {}中定义属性，然后在规则或内联中定义相同的属性将导致：root样式被覆盖。

双色图标备忘表

Properties	Syntax	Values	Notes
设置主要层透明度	--fa-primary-opacity	0 1.0	用作CSS自定义属性
设置次要层透明度	--fa-secondary-opacity	0 1.0	用作CSS自定义属性
设置主要层透明度	--fa-primary-color	任何有效的CSS颜色值	用作CSS自定义属性
设置次要层透明度	--fa-secondary-color	任何有效的CSS颜色值	用作CSS自定义属性
交换图层的透明度	fa-swap-opacity	N/A	与其他Font Awesome所定义的类一起添加到<i>

疑难解答

我可以通过使用CSS伪元素来使用双色图标吗？

是的，双色图标样式可以与CSS伪元素一起使用。不过这样做比使用CSS伪元素渲染图标的基本难度还要复杂。

我要使用的图标未显示为双色风格！

让我们仔细检查几件事...

您是否使用了双色图标的fad前缀？

双色图标仅在Font Awesome专业版中可用-确保您具备有效的专业版。

最近我们非常频繁地发布图标。确保您使用的是最新和最佳版本，以便随时使用想要使用的任何新图标。

如果您决定托管自己的Font Awesome副本，请检查是否已移动所有使用所需图标所需的文件。另外，请在HTML的<head>中再次检查这些文件的路径。

救命！我无法定位各个图层！

确保您使用的是我们定义的正确的自定义属性值。另外，请确保您尚未定义可能会覆盖所有内容的自定义属性（检查内联和自定义CSS中的内容）。我们不建议编写针对特定类或伪元素的自定义CSS，因为我们的网络字体和SVG版本的Font Awesome之间存在一些差异，因此可能会出现一些问题。

我可以在双色图标旁边使用其他Font Awesome样式吗？

当然！调整大小、固定宽度和动画之类的东西都可以与双色图标一起使用。如果您使用的是Font Awesome的SVG + JS版本，那么我们强大的转换功能和分层功能可以完成一些令人惊奇的事情。

双色图标可以在哪些浏览器中运行？

双色图标在所有现代Web浏览器中均呈现了出色的效果。由于Internet Explorer（版本10和11）不支持CSS自定义属性，因此虽然双色图标可以呈现，但您将无法为单个图层定义颜色或透明度。如果您必须支持该过时的浏览器，建议您在图标或其父元素上定义颜色。

开始使用双色图标！使用我们的托管工具包即可在您的站点上获得彩色图标，从而实现轻松拆分！需要自己托管事物还是需要使用特定语言工作？我们还有其他选择。哦，请确保您仔细阅读整个双色图标目录，以找到适合该工作的图标。

Angular

Font Awesome现在拥有一个正式的Angular组件，可供您在项目中轻松使用。

兼容性提升！如果使用的是Angular，则需要angular-fontawesome软件包或带有CSS的Web字体。

双色图标

双色图标尚未添加到此组件。我们将在不久的将来推进这项工作。

文档

npm上提供了Font Awesome Angular组件，官方文档也在这里。

Useful Link	What it’s good fort
API文档	官方Angular组件文档
GitHub项目	提交问题以及协作/贡献代码库

Ember

Font Awesome现在拥有一个官方的Ember组件，可供您在项目中轻松使用。

兼容性提升！如果使用的是Ember，则需要ember-fontawesome软件包或带有CSS的Web字体。

双色图标双色图标尚未添加到此组件。我们将在不久的将来推进这项工作。

文档

npm上提供了Font Awesome Ember组件，官方文档也在这里。

Useful Link	What it’s good fort
API文档	官方Ember组件文档
GitHub项目	提交问题以及协作/贡献代码库

小心！此功能要求您使用我们的SVG + JS版本的Font Awesome。

使用jQuery和带有JavaScript的SVG

带有JavaScript的Font Awesome SVG与jQuery兼容，但需要一些知识基础。了解SVG的工作原理以及成功与jQuery集成所需要做的工作。

从4.x版本升级？如果这看起来太复杂，也可以考虑使用CSS切换到Web字体。 Font Awesome 5中的每种技术都有其优势，与jQuery集成可能会有些繁琐。将SVG标记嵌套在<i>标记内可能也会有所帮助。

在其父级中嵌套SVG标签

撇开jQuery之类库问题的一种快速方法是允许SVG标签嵌套在父标签中。这使得事件绑定和其他DOM操作起作用。

首先，我们需要使用JavaScript配置Font Awesome SVG进行嵌套：


<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>

如果我们在页面上添加<i>标记：


<i class="fas fa-camera"></i>

SVG图标呈现在<i>标签内：


<i data-fa-i2svg>
<svg class="svg-inline--fa fa-camera fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="camera" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M188.12 210.74L142.86 256l45.25 45.25L233.37 256l-45.25-45.26zm113.13-22.62L256 142.86l-45.25 45.25L256 233.37l45.25-45.25zm-90.5 135.76L256 369.14l45.26-45.26L256 278.63l-45.25 45.25zM256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm186.68 295.6l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-28.29-28.29-45.25 45.25 33.94 33.94 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-33.94-33.94-45.26 45.26 28.29 28.29c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0L256 414.39l-28.29 28.29c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l28.29-28.29-45.25-45.26-33.94 33.94 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 33.94-33.94-45.25-45.25-28.29 28.29c-3.12 3.12-8.19 3.12-11.31 0L69.32 295.6c-3.12-3.12-3.12-8.19 0-11.31L97.61 256l-28.29-28.29c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l28.29 28.29 45.25-45.26-33.94-33.94-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 33.94 33.94 45.26-45.25-28.29-28.29c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0L256 97.61l28.29-28.29c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-28.29 28.29 45.26 45.25 33.94-33.94-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-33.94 33.94 45.25 45.26 28.29-28.29c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31L414.39 256l28.29 28.28a8.015 8.015 0 0 1 0 11.32zM278.63 256l45.26 45.25L369.14 256l-45.25-45.26L278.63 256z">
</path>
</svg>
</i>

什么是data-fa-i2svg？

Font Awesome使用此特殊标记来标记已渲染为SVG图标的元素。字符“ i2svg”是“ SVG的i标签”的缩写。

如果不嵌套，这就是您需要知道的了

该库查找看起来像图标的标签：


<i class="fas fa-coffee" data-fa-mask="fas fa-circle"></i>

它们被替换为新的svg元素：


<svg class="svg-inline--fa fa-coffee fa-w-20" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="coffee" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"></path></svg>
<!-- <i class="fas fa-coffee"></i> -->

它是怎么运作的？

1.它寻找类似于fas fa-coffee的DOM元素

2.它找出前缀（fas），图标（coffee）之类的东西

3.它计划在下一个合适的时间点替换<i>元素

4.当浏览器准备就绪时，<i> DOM元素将替换为新的<svg>元素

5.为了方便起见，在新的<svg>元素下方添加了表示原始HTML的注释。

为什么这很重要？

由于替换了元素，因此对该元素的所有绑定都将丢失，并且此示例无法正常工作：


<nav>
<ul style="list-style: none; margin: 0; padding: 0;">
<li><i class="fa fa-user fa-2x"></i></li>
</ul>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function () {
$('nav i').on('click', function () {  // the i element will not exist once the icon is rendered
alert('You will never see this');
});
});
</script>

该示例有效，是因为它不依赖于<i>元素：


<ul style="list-style: none; margin: 0; padding: 0;">
<li><i class="fa fa-user fa-2x"></i></li>
</ul>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function () {
$('nav li').on('click', function () {  // we are letting the li bind to the event
alert('This works, though');
});
});
</script>

如果确实需要将事件附加到图标，则可以使用data-fa-i2svg属性，但需要允许动态创建svg元素。

将事件附加到父级或更高并过滤图标：


<nav>
<ul style="list-style: none; margin: 0; padding: 0;">
<li><i class="fa fa-user fa-2x"></i></li>
</ul>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function () {
$('nav').on('click', '[data-fa-i2svg]', function () {
alert('You clicked the icon itself');
});
});
</script>

避免创建对图标的JavaScript变量引用由于Font Awesome正在动态替换和修改您的图标，因此对图标的任何保留引用都无法按预期工作。

这样行不通：


<nav>
<ul>
<li><i class="fa fa-user fa-2x"></i></li>
</ul>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function () {
var icon = $('nav i')

$('nav li').on('click', '[data-fa-i2svg]', function () {
icon.addClass('active');  // This has no effect, the original icon has been replaced
});
});
</script>

通过更改类来更改图标


<button>Open up <i class="fa fa-angle-right"></i></button>

<script>
document.addEventListener('DOMContentLoaded', function () {
$('button').on('click', function () {
$(this)
.find('[data-fa-i2svg]')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
</script>

Less

在项目中使用Less作为CSS预处理程序？没问题，如果您希望将我们的样式导入工作流程，Font Awesome提供了一个Less版本。

您已经下载了副本，对吗？确保您已下载了所需文件的副本。您需要它来完成我们将要完成的以下任何操作。

工具包内部是什么结构？

以下Less对应的mixin和文件的一些详细信息。

Files	What They Do
fontawesome.less	Font Awesome主编译文件
brands.less	品牌图标样式
solid.less	实心图标样式
regular.less	常规图标样式
light.less	细体图标样式
_core.less	基本图标参考类的语法和定义
_mixins.less	样式/图标定义中使用的实用工具
_icons.less	所有图标定义
_variables.less	定义在样式中使用的变量的位置
_animated.less	动画图标支持样式
_bordered-pulled.less	边框+拖动图标支持样式
_fixed-width.less	固定宽度图标支持样式
_larger.less	图标尺寸支持样式
_list.less	列表图标支持样式
_rotated-flipped.less	旋转图标支持样式
_stacked.less	堆叠图标支持样式
_screen-reader.less	屏幕阅读器和辅助功能的样式

在您的编译中添加Font Awesome

将less文件夹复制到您的项目中。然后将整个webfonts文件夹复制到提供静态文件的项目中。

打开项目的less/variables.less，然后编辑@fa-font-path变量，指向放置webfonts文件夹的位置。


@fa-font-path:        "../webfonts";

通过在主Less文件中添加@import "less/fontawesome.less" 来导入Font Awesome。另外，在您的主Less文件中导入一种或多种样式 @import "less/solid.less"。

编译代码并开始在项目中使用这些新图标！

您需要记得，字体路径是相对于已编译CSS目录的相对路径。确保将webfonts目录放置在相对于最终CSS所在的位置。

使用我们的Mixin

您可以使用.fa-icon; 将其设置为图标。使用.fas; 以实心样式创建图标。导入其他样式以使用其他前缀。使用变量可以使引入内容值更加容易。


@import "./fontawesome/less/fontawesome";
@import "./fontawesome/less/solid";
@import "./fontawesome/less/brands";

.user {
.fa-icon;
.fas;

&:before {
content: @fa-var-user;
}
}

.twitter {
.fa-icon;
.fab;

&:before {
content: @fa-var-twitter;
}
}

React

Font Awesome现在有一个官方的React组件，可供您在项目中轻松使用。

兼容性提升！如果您使用的是React，则需要带CSS的react-fontawesome软件包或Web字体。

React Native是一个单独的项目如果您使用的是React Native，请确保使用专用组件react-native-fontawesome。

双色图标

双色图标尚未添加到此组件。我们将在不久的将来推进这项工作。

文档

Useful Link	What it’s good for
API文档	官方React组件文档
GitHub项目	提交问题以及协作/贡献代码库

ReactNative

Font Awesome现在有一个官方的React Native组件，可供您在项目中轻松使用。

兼容性提升！如果您使用的是React Native，则需要使用CSS的react-native-fontawesome软件包或Web字体。

双色图标双色图标尚未添加到此组件。我们将在不久的将来推进这项工作。

文档

npm上提供了Font Awesome React Native组件，官方文档也在这里。

Useful Link	What it’s good for
API文档	官方React Native组件文档
GitHub项目	提交问题以及协作/贡献代码库

Sass (SCSS)

在项目中使用SCSS作为CSS预处理程序？没问题，如果您希望将我们的样式导入工作流程，Font Awesome提供了一个SCSS版本。

您已经下载了副本，对吗？确保您已下载了所需文件的副本。您需要它来完成我们将要完成的以下任何操作。

工具包内部是什么结构？

以下SCSS对应的mixin和文件的一些详细信息。

Files	What They Do
fontawesome.scss	Font Awesome主编译文件
brands.scss	品牌图标样式
solid.scss	实心图标样式
regular.scss	常规图标样式
light.scss	细体图标样式
_core.scss	基本图标参考类的语法和定义
_mixins.scss	样式/图标定义中使用的实用工具
_icons.scss	所有图标定义
_variables.scss	定义在样式中使用的变量的位置
_animated.scss	动画图标支持样式
_bordered-pulled.scss	边框+拖动图标支持样式
_fixed-width.scss	固定宽度图标支持样式
_larger.scss	图标尺寸支持样式
_list.scss	列表图标支持样式
_rotated-flipped.scss	旋转图标支持样式
_stacked.scss	堆叠图标支持样式
_screen-reader.scss	屏幕阅读器和辅助功能的样式

在您的编译中添加Font Awesome

将scss文件夹复制到您的项目中。然后将整个webfonts文件夹复制到提供静态文件的项目中。

打开项目的scss/variables.scss，然后编辑@fa-font-path变量，指向放置webfonts文件夹的位置。


$fa-font-path:        "../webfonts";

您需要记得，字体路径是相对于已编译CSS目录的相对路径。确保将webfonts目录放置在相对于最终CSS所在的位置。

使用我们的Mixin

您可以使用@include fa-icon; 将其设置为图标。使用@extend .fas; 以实心样式创建图标。导入其他样式以使用其他前缀。使用fa-content和变量名称可以使包含内容值更加容易。


@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

.user {
@extend %fa-icon;
@extend .fas;

&:before {
content: fa-content($fa-var-user);
}
}

.twitter {
@extend %fa-icon;
@extend .fab;

&:before {
content: fa-content($fa-var-twitter);
}
}

Turbolinks

Font Awesome与大多数经常与Rails搭配使用的工具很好地集成在一起，通过换出<body>并合并HTML页面的<head>来提高页面性能。

这仅在您将SVG与JS结合使用时比较棘手如果您在CSS中使用webfonts，则无需担心此设置。将SVG与JS结合会带来多余的工作

我们需要通过集成解决的一些问题

在安装了带有JS版本的Font Awesome的SVG并将第一页加载到Rails应用中。

1.Font Awesome会搜索任何<i>元素并将其替换为<svg>元素

2.它将创建一个MutationObserver，监视页面中的更改以进行实时的替换

当Turbolinks用新内容替换页面的<body>时，Font Awesome会自动将此MutationObserver重新连接到新内容。

问题出在这里：闪烁的图标消失了，然后迅速出现。这看起来很麻烦，但是我们可以轻松修复它。

将mutateApproach配置设置为同步（在5.8.0或更高版本中可用）提供了一种方法，可以在Turbolinks收到新主体后立即渲染它们，从而跳过丢失的图标。

Rails

首先，假设您已经安装了Turbolinks并在Rails应用程序中对其进行了配置。

使用我们的CDN或您自己进行托管

如果您通过修改Rails布局安装了Font Awesome，则可能包含<script>标签。

添加data-mutate-approach ="sync"。


<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-mutate-approach="sync"></script>
</head>

<body>
<%= yield %>
</body>
</html>

使用asset pipeline

安装Font Awesome的另一种常见方法是将源文件放置在vendor/assets/javascripts目录中，然后修改app/assets/javascripts/application.js 来引入// =require fontawesome/all。然后，Font Awesome将引入到您的Rails布局已包含的应用程序包中。

您可以在布局中添加<script>标记以更改配置。


<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<script>
FontAwesomeConfig = {
mutateApproach: 'sync'
}
</script>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<%= yield %>
</body>
</html>

但是，也许最好的方法是直接在application.js文件中进行配置。


// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require fontawesome/all
//= require_tree .

FontAwesome.config.mutateApproach = 'sync'

使用Webpacker和@fortawesome/fontawesome-svg-core

如果使用Webpacker和NPM来安装Font Awesome，则可以使用摇树来创建子集图标。

您的安装可能看起来像这样，在这种情况下，我们只需使用API更改配置即可。


import { config, library, dom } from '@fortawesome/fontawesome-svg-core'

# Change the config to fix the flicker
config.mutateApproach = 'sync'

# An example icon
import {
faGithub
} from '@fortawesome/free-brands-svg-icons'

library.add(
faGithub
)

dom.watch()

Vue.js

Font Awesome现在有一个官方的Vue.js组件，可供您在项目中轻松使用。

兼容性提升！如果您使用的是Vue，则需要使用CSS的react-native-fontawesome软件包或Web字体。

双色图标

双色图标尚未添加到此组件。我们将在不久的将来推进这项工作。

文档

npm上提供了Font Awesome Vue.j组件，官方文档也在这里。}

Useful Link	What it’s good fort
API文档	官方Vue.js组件文档
GitHub项目	提交问题以及协作/贡献代码库

WordPress

Font Awesome拥有官方的WordPress插件，可供那些希望在其项目中轻松使用我们的图标的人使用。我们还可以向您展示如何在没有插件的情况下自定义WordPress。

选择您自己的方式

在WordPress中设置“Font Awesome”已经相对简单。但是，根据我们与使用WordPress的客户合作的经验，更容易出现的问题是处理由主题和插件（尝试加载其自己的Font Awesome版本）引起的冲突。我们的图标在WordPress生态系统中非常欢迎，所以也经常看到出现冲突的问题。

我们的目标不仅是使您可以轻松地在WordPress中设置Font Awesome，而且还使其设置足够兼容，可以与您的主题和尝试加载自己的Font Awesome的插件一起使用，从而使它们都能正常工作，使用您喜欢的Font Awesome版本。

因此，我们为您提供了两种不同的设置方法：使用我们的插件，或者自定义没有插件的WordPress。

两者都是为WordPress的实际使用而设计的，毕竟出现的冲突很多。插件方法可以为您处理很多事情，而您无需编写任何PHP代码。这种自定义方法需要您付出劳力，但将您需要修改的PHP代码量减至最少。

我应该选择哪一个？i18n.WordPress.p5+' ' +i18n.WordPress.p6

您的网站与主题或插件是否存在与Font Awesome冲突？尝试冲突检测。

避免安装其他插件。

减少安装额外的插件，以此避免在以后的插件中引入冲突。

您可以轻松修改主题的functions.php文件以自定义WordPress。

您现在要使用套件。

（我们正在努力为插件添加套件支持。）

插件设置

发布候选我们的插件仍处于预发布模式，需要您的反馈！如果您有任何问题或疑问，请给我们发送电子邮件hello@fontawesome.com

在哪里找到插件

该插件可从WordPress插件页面获得。

可从wordpress.org获得

如何安装

1.登录到您的WordPress管理员

2.点击左侧菜单中的“插件”

3.点击“Add new”

4.按“Author”搜索“fontawesome”

5.在Font Awesome插件那里点击“Install Now”

6.点击“Activate”

点击`Add new`

搜索`Font Awesome`

点击`Install Now`

点击`Activate`后就完成了！

怎样使用

访问插件页面以了解更多信息。

在专业版CDN中使用插件

专业版订阅用户可以访问专业版CDN。

将您的域添加到您的Font Awesome帐户域

请注意，您需要专业版订阅才能进行下一步

1.访问https://fontawesome.com/account/cdn

2.添加您要用于专业版订阅的域

在WordPress安装中启用专业版CDN：

1.转到您的WordPress管理员“Settings”，然后选择“Font Awesome”

2.切换到“Use Pro”选项

3.点击“Save Changes”

就这样！您已经设置好了.

将图标添加到WordPress页面、帖子、模板

在您的WordPress内容中使用<i class="fas fa-stroopwafel"></i>这样的标签添加图标。

如果是短代码，可以像这样使用：[icon name="stroopwafel"]

有关更多详细信息，请参阅插件目录中的插件自述文件。

了解常见兼容性问题

Font Awesome在WordPress主题和插件中非常受欢迎。您正在使用的主题或其他插件可能正在尝试安装其自己的Font Awesome版本，而与您自己安装的版本不同。这可能导致混乱和未知的结果。但是，如果您要使用最新的图标，或者特别是要使用已购买的专业版图标，那么解决冲突很重要。

如果您在插件的管理员设置页面上启用了“Remove unregistered clients”选项，则我们的插件可以自动解决许多此类问题。

一些主题和插件具有自己的图标选择器，仅用他们所知道的图标填充。在这种情况下，您的专业版图标可能不会显示在这些图标选择器中。我们希望在主题和插件之间建立更好的协调，为您带来更流畅的体验。

我们很乐意与其他主题和插件开发人员讨论如何改善兼容性。开发人员可以通过hello@fontawesome.com向我们发送消息以使对话继续进行。

Font Awesome

定制颜色图标

专业设计+完美像素

近乎无限的图标

Font Awesome可能在以下方面对您有所帮助

无障碍辅助

桌面友好

历经考验

完美像素渲染

涵盖基本造型

强化变形

走您自己的路

漫漫征途

All Icons

从4.x版本升级

使用套件快速轻松地升级

自动映射旧图标名称

始终加载您套件指定的Font Awesome版本

从4.x版本到5.x版本有什么变化？

3种不同的图标样式

图标名称变更

线框图标

手动升级

使用SVG + JS时需要额外的步骤

图标名称在4.x版本和5.x版本之间更改

下一步

自主托管Font Awesome

您已经下载了一份副本？

您的下载包含了些什么？

在CSS中使用Web字体

需要使用CSS预处理程序？

将SVG与JavaScript结合使用

仔细检查您的路径

仅使用某些样式

注意网络字体的路径

仔细检查路径

下一步

使用包管理器

Font Awesome包中有什么？

安装免费版的Font Awesome

安装专业版的Font Awesome

您需要专业订阅才能使用它们！

我们正在逐步淘汰npm注册表身份验证的旧方法

下一步

下一步

基本用法

Font Awesome图标+您项目的样式

其他样式选项

图标备忘表

内置于我们的图标表中

关于备忘单

那么，我何时以及如何使用这些图标信息？

图标尺寸

相对尺寸

固定宽度

列表中的图标

旋转

旋转类

图标动画

图标动画+摆动

边框+拖动图标

堆叠

对齐堆叠和常规图标

强化变形

缩放比例

定位

旋转和翻转

图标遮罩

分层、文本和计数器

双色图标

基本用法

交换图层透明度

改变透明度

为双色图标着色

进阶使用

使用颜色突出显示图标的一部分或注释状态

创建看起来像插图的全彩图标

带有品牌视觉色彩的主题图标

轮到你了！

在项目中使用

救命！我无法定位各个图层！