Font Awesome 5 và cách sử dụng

Font Awesome 5 có một sự thay đổi khá nhiều so với các phiên bản trước. Trong Font Awesome 5, ta có nhiều lựa chọn hơn với svg với js, webfont với css và font sử dụng cho desktop.

Trong phiên bản này đã có sự phân chia, bạn có thể mua bản pro để sử dụng các font cao cấp hơn. Bài viết này sẽ chỉ cập đến phiên bản free và cách sử dụng chúng

Tại thời điểm viết bài font awesome (FA) đang có phiên bản 5.0.9

I. Tích hợp Font Awesome

Trong FA 5 với bản free sẽ có cho bạn 3 loại font (Regular, Solid, Brands)

New Prefix	Icon Set	SVG with JS Filename	Web Font Filename
fab	Font Awesome Brands	fa-brands.js	fa-brands-400.*
fas or fa	Font Awesome Solid	fa-solid.js	fa-solid-900.*
far	Font Awesome Regular	fa-regular.js	fa-regular-400.*
fal	Font Awesome Light	fa-light.js	fa-light-300.*

1. Với SVG with JS

Bạn dán đoạn code sau trước thẻ đóng </head>. Lưu ý: không được bỏ defer nếu muốn CSS Pseudo hoạt động

* Tích hợp tất cả

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

* Tích hợp lẻ

- Font Awesome 5 Solid

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/solid.js" integrity="sha384-P4tSluxIpPk9wNy8WSD8wJDvA8YZIkC6AQ+BfAFLXcUZIPQGu4Ifv4Kqq+i2XzrM" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/fontawesome.js" integrity="sha384-2IUdwouOFWauLdwTuAyHeMMRFfeyy4vqYNjodih+28v2ReC+8j+sLF9cK339k5hY" crossorigin="anonymous"></script>

- Font Awesome 5 Free (Regular)

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/regular.js" integrity="sha384-BazKgf1FxrIbS1eyw7mhcLSSSD1IOsynTzzleWArWaBKoA8jItTB5QR+40+4tJT1" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/fontawesome.js" integrity="sha384-2IUdwouOFWauLdwTuAyHeMMRFfeyy4vqYNjodih+28v2ReC+8j+sLF9cK339k5hY" crossorigin="anonymous"></script>

- Font Awesome 5 Brands

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/brands.js" integrity="sha384-qJKAzpOXfvmSjzbmsEtlYziSrpVjh5ROPNqb8UZ60myWy7rjTObnarseSKotmJIx" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/fontawesome.js" integrity="sha384-2IUdwouOFWauLdwTuAyHeMMRFfeyy4vqYNjodih+28v2ReC+8j+sLF9cK339k5hY" crossorigin="anonymous"></script>

Trong trường hợp tích hợp 2 trong 3 thì bạn chỉ cần 1 file fontawesome.js

2. Web Fonts with CSS

* Tích hợp tất cả

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

* Tích hợp lẻ

- Font Awesome 5 Solid

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/solid.css" integrity="sha384-29Ax2Ao1SMo9Pz5CxU1KMYy+aRLHmOu6hJKgWiViCYpz3f9egAJNwjnKGgr+BXDN" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous">

- Font Awesome 5 Free (Regular)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/regular.css" integrity="sha384-seionXF7gEANg+LFxIOw3+igh1ZAWgHpNR8SvE64G/Zgmjd918dTL55e8hOy7P4T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous">

- Font Awesome 5 Brands

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/brands.css" integrity="sha384-ATC/oZittI09GYIoscTZKDdBr/kI3lCwzw3oBMnOYCPVNJ4i7elNlCxSgLfdfFbl" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous">

Trong trường hợp tích hợp 2 trong 3 thì bạn chỉ cần 1 file fontawesome.css

II, Cách sử dụng

1. SVG with JS

Đây là sự cải tiến vượt trội của FA, cách sử dụng icon vector dạng svg đã được sử dụng khá nhiều và giờ đây FA đã có được nó. theo đó khi bạn sử dụng chế độ này với FA, FA sẽ tự động thay thế font chữ awesome ví dụ <i class="fas fa-camera-retro"></i> thành dạng SVG trực tiếp trên trang. Đồng thời nó sẽ tự động kế thừa các thuộc tính CSS

Ví dụ khi bạn khai báo

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

Thì khi tải trang FA sẽ thay thế nó thành

<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-i2svg="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"></path>
</svg>

Các biểu tượng sẽ được tải không đồng bộ trong trang, điều này có một số lợi ích và một số nhược điểm. Lợi ích chính để tải theo cách này là nó không chặn trang khỏi hiển thị trong khi nó chờ đợi các biểu tượng để tải. Tuy nhiên, điều này cũng có thể được xem là một tiêu cực bởi vì một khi các biểu tượng được tải có thể làm cho bố cục dễ thay đổi

Viết code HTML

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

Kết quả:

Với CSS:

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

Kết quả:

Bạn lấy list icon tại đây. Trong FA5 có một số style khác với các phiên bản trước

Style	Style Prefix	Code	Result
Solid	fas	<i class="fas fa-camera-retro">
Regular	far (PRO)	<i class="far fa-camera-retro">
Light	fal (PRO)	<i class="fal fa-camera-retro">
Brands	fab	<i class="fab fa-font-awesome">

Chỉnh icon size

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

Kết quả:


Trong đó

Class	Size
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em, also applies vertical-align: -25%
fa-2x through fa-10x	2em through 10em

Cố định chiều rộng icon

<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>

Kết quả

Home

Info

Library

Applications

Settings

Sử dụng với danh sách

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

Bordered & Pulled Icons

<i class="fas fa-quote-left fa-2x fa-pull-left 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.

Kết quả:
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.

Với hiệu ứng

<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>
</div>

Kết quả :

Tính năng mới: Power Transforms

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

Di chuyển vị trí

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

Sử dụng với xoay và lật

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

Tính năng mới : Đánh dấu

<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>
</div>

Tính năng mới: Layering, Text, & Counters

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

CSS Pseudo-elements (Sử dụng cho css)

Để sử dụng FA5 với css Pseudo trong chế độ svg with js, bạn cần thêm 1 dòng lệnh

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>

Sau đó thì bạn có thể thoải mái sử dụng ví dụ

  .login::before {
    font-family: "Font Awesome 5 Solid";   content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Regular"; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands";  content: "\f099";
  }

Với 3 style khác nhau

2. Web Fonts With CSS

Cách sử dụng hoàn toàn như trên, duy nhất phần CSS Pseudo-Elements bạn sẽ không cần dùng script để bật config

III. Cập nhật từ phiên bản 4 (chỉ sử dụng cho SVG with JS)

Do phiên bản 4 và 5 có sự khác biệt cực kì lớn vì vậy nếu như bạn đang dùng phiên bản 4 muốn cập nhật lên 5 thì cần thêm đoạn js sau

Copy

 <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/v4-shims.js"></script>

Danh sách thay đổi

Old Icon Name or Alias (Version 4)	New Icon Name (Version 5)	New Icon Prefix
address-book-o	address-book	far
address-card-o	address-card	far
area-chart	chart-area	fas
arrow-circle-o-down	arrow-alt-circle-down	far
arrow-circle-o-left	arrow-alt-circle-left	far
arrow-circle-o-right	arrow-alt-circle-right	far
arrow-circle-o-up	arrow-alt-circle-up	far
arrows-alt	expand-arrows-alt	fas
arrows-h	arrows-alt-h	fas
arrows-v	arrows-alt-v	fas
arrows	arrows-alt	fas
asl-interpreting	american-sign-language-interpreting	fas
automobile	car	fas
bank	university	fas
bar-chart-o	chart-bar	far
bar-chart	chart-bar	far
bathtub	bath	fas
battery-0	battery-empty	fas
battery-1	battery-quarter	fas
battery-2	battery-half	fas
battery-3	battery-three-quarters	fas
battery-4	battery-full	fas
battery	battery-full	fas
bell-o	bell	far
bell-slash-o	bell-slash	far
bitbucket-square	bitbucket	fab
bitcoin	btc	fab
bookmark-o	bookmark	far
building-o	building	far
cab	taxi	fas
calendar-check-o	calendar-check	far
calendar-minus-o	calendar-minus	far
calendar-o	calendar	far
calendar-plus-o	calendar-plus	far
calendar-times-o	calendar-times	far
calendar	calendar-alt	fas
caret-square-o-down	caret-square-down	far
caret-square-o-left	caret-square-left	far
caret-square-o-right	caret-square-right	far
caret-square-o-up	caret-square-up	far
cc	closed-captioning	far
chain-broken	unlink	fas
chain	link	fas
check-circle-o	check-circle	far
check-square-o	check-square	far
circle-o-notch	circle-notch	fas
circle-o	circle	far
circle-thin	circle	far
clock-o	clock	far
close	times	fas
cloud-download	cloud-download-alt	fas
cloud-upload	cloud-upload-alt	fas
cny	yen-sign	fas
code-fork	code-branch	fas
comment-o	comment	far
commenting-o	comment-alt	far
commenting	comment-alt	fas
comments-o	comments	far
credit-card-alt	credit-card	fas
cutlery	utensils	fas
dashboard	tachometer-alt	fas
deafness	deaf	fas
dedent	outdent	fas
diamond	gem	far
dollar	dollar-sign	fas
dot-circle-o	dot-circle	far
drivers-license-o	id-card	far
drivers-license	id-card	fas
eercast	sellcast	fab
envelope-o	envelope	far
envelope-open-o	envelope-open	far
eur	euro-sign	fas
euro	euro-sign	fas
exchange	exchange-alt	fas
external-link-square	external-link-square-alt	fas
external-link	external-link-alt	fas
eyedropper	eye-dropper	fas
fa	font-awesome	fab
facebook-f	facebook-f	fab
facebook-official	facebook	fab
facebook	facebook-f	fab
feed	rss	fas
file-archive-o	file-archive	far
file-audio-o	file-audio	far
file-code-o	file-code	far
file-excel-o	file-excel	far
file-image-o	file-image	far
file-movie-o	file-video	far
file-o	file	far
file-pdf-o	file-pdf	far
file-photo-o	file-image	far
file-picture-o	file-image	far
file-powerpoint-o	file-powerpoint	far
file-sound-o	file-audio	far
file-text-o	file-alt	far
file-text	file-alt	fas
file-video-o	file-video	far
file-word-o	file-word	far
file-zip-o	file-archive	far
files-o	copy	far
flag-o	flag	far
flash	bolt	fas
floppy-o	save	far
folder-o	folder	far
folder-open-o	folder-open	far
frown-o	frown	far
futbol-o	futbol	far
gbp	pound-sign	fas
ge	empire	fab
gear	cog	fas
gears	cogs	fas
gittip	gratipay	fab
glass	glass-martini	fas
google-plus-circle	google-plus	fab
google-plus-official	google-plus	fab
google-plus	google-plus-g	fab
group	users	fas
hand-grab-o	hand-rock	far
hand-lizard-o	hand-lizard	far
hand-o-down	hand-point-down	far
hand-o-left	hand-point-left	far
hand-o-right	hand-point-right	far
hand-o-up	hand-point-up	far
hand-paper-o	hand-paper	far
hand-peace-o	hand-peace	far
hand-pointer-o	hand-pointer	far
hand-rock-o	hand-rock	far
hand-scissors-o	hand-scissors	far
hand-spock-o	hand-spock	far
hand-stop-o	hand-paper	far
handshake-o	handshake	far
hard-of-hearing	deaf	fas
hdd-o	hdd	far
header	heading	fas
heart-o	heart	far
hospital-o	hospital	far
hotel	bed	fas
hourglass-1	hourglass-start	fas
hourglass-2	hourglass-half	fas
hourglass-3	hourglass-end	fas
hourglass-o	hourglass	far
id-card-o	id-card	far
ils	shekel-sign	fas
image	image	far
inr	rupee-sign	fas
institution	university	fas
intersex	transgender	fas
jpy	yen-sign	fas
keyboard-o	keyboard	far
krw	won-sign	fas
legal	gavel	fas
lemon-o	lemon	far
level-down	level-down-alt	fas
level-up	level-up-alt	fas
life-bouy	life-ring	far
life-buoy	life-ring	far
life-saver	life-ring	far
lightbulb-o	lightbulb	far
line-chart	chart-line	fas
linkedin-square	linkedin	fab
linkedin	linkedin-in	fab
long-arrow-down	long-arrow-alt-down	fas
long-arrow-left	long-arrow-alt-left	fas
long-arrow-right	long-arrow-alt-right	fas
long-arrow-up	long-arrow-alt-up	fas
mail-forward	share	fas
mail-reply-all	reply-all	fas
mail-reply	reply	fas
map-marker	map-marker-alt	fas
map-o	map	far
meanpath	font-awesome	fab
meh-o	meh	far
minus-square-o	minus-square	far
mobile-phone	mobile-alt	fas
mobile	mobile-alt	fas
money	money-bill-alt	far
moon-o	moon	far
mortar-board	graduation-cap	fas
navicon	bars	fas
newspaper-o	newspaper	far
paper-plane-o	paper-plane	far
paste	clipboard	far
pause-circle-o	pause-circle	far
pencil-square-o	edit	far
pencil-square	pen-square	fas
pencil	pencil-alt	fas
photo	image	far
picture-o	image	far
pie-chart	chart-pie	fas
play-circle-o	play-circle	far
plus-square-o	plus-square	far
question-circle-o	question-circle	far
ra	rebel	fab
refresh	sync	fas
remove	times	fas
reorder	bars	fas
repeat	redo	fas
resistance	rebel	fab
rmb	yen-sign	fas
rotate-left	undo	fas
rotate-right	redo	fas
rouble	ruble-sign	fas
rub	ruble-sign	fas
ruble	ruble-sign	fas
rupee	rupee-sign	fas
s15	bath	fas
scissors	cut	fas
send-o	paper-plane	far
send	paper-plane	fas
share-square-o	share-square	far
shekel	shekel-sign	fas
sheqel	shekel-sign	fas
shield	shield-alt	fas
sign-in	sign-in-alt	fas
sign-out	sign-out-alt	fas
signing	sign-language	fas
sliders	sliders-h	fas
smile-o	smile	far
snowflake-o	snowflake	far
soccer-ball-o	futbol	far
sort-alpha-asc	sort-alpha-down	fas
sort-alpha-desc	sort-alpha-up	fas
sort-amount-asc	sort-amount-down	fas
sort-amount-desc	sort-amount-up	fas
sort-asc	sort-up	fas
sort-desc	sort-down	fas
sort-numeric-asc	sort-numeric-down	fas
sort-numeric-desc	sort-numeric-up	fas
spoon	utensil-spoon	fas
square-o	square	far
star-half-empty	star-half	far
star-half-full	star-half	far
star-half-o	star-half	far
star-o	star	far
sticky-note-o	sticky-note	far
stop-circle-o	stop-circle	far
sun-o	sun	far
support	life-ring	far
tablet	tablet-alt	fas
tachometer	tachometer-alt	fas
television	tv	fas
thermometer-0	thermometer-empty	fas
thermometer-1	thermometer-quarter	fas
thermometer-2	thermometer-half	fas
thermometer-3	thermometer-three-quarters	fas
thermometer-4	thermometer-full	fas
thermometer	thermometer-full	fas
thumb-tack	thumbtack	fas
thumbs-o-down	thumbs-down	far
thumbs-o-up	thumbs-up	far
ticket	ticket-alt	fas
times-circle-o	times-circle	far
times-rectangle-o	window-close	far
times-rectangle	window-close	fas
toggle-down	caret-square-down	far
toggle-left	caret-square-left	far
toggle-right	caret-square-right	far
toggle-up	caret-square-up	far
trash-o	trash-alt	far
trash	trash-alt	fas
try	lira-sign	fas
turkish-lira	lira-sign	fas
unsorted	sort	fas
usd	dollar-sign	fas
user-circle-o	user-circle	far
user-o	user	far
vcard-o	address-card	far
vcard	address-card	fas
video-camera	video	fas
vimeo	vimeo-v	fab
volume-control-phone	phone-volume	fas
warning	exclamation-triangle	fas
wechat	weixin	fab
wheelchair-alt	accessible-icon	fab
window-close-o	window-close	far
won	won-sign	fas
y-combinator-square	hacker-news	fab
yc-square	hacker-news	fab
yc	y-combinator	fab
yen	yen-sign	fas
youtube-play	youtube	fab
youtube-square	youtube	fab

Mẹo: Lấy nhanh list icon trong trang cheatsheet

Good Luck !