Labels

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

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