Hướng dẫn font awesome 5 cheatsheet - phông chữ tuyệt vời 5 cheatsheet

Question

Nội dung chính Show

02. Cài đặt
03. Thêm thư viện vào trang web
04. Cách tìm icon và sử dụng
05. Color Icons
06. Sizing Icons
06. Sizing Icons
06. Sizing Icons
06. Sizing Icons
06. Sizing Icons
06. Sizing Icons
06. Sizing Icons
Xác định font-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free là Solid và Brands còn 3 kiểu pro (trả phí) là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị.

Font Awesome 5 là một trong những icon font phổ biến nhất hiện nay, tại thời điểm viết bài 28/10/2020 với phiên bản 5.15.1 hỗ trợ trên 1600 icon miễn phí, rất dễ dàng để tích hợp vào website, công việc của bạn bây giờ là lựa chọn icon và copy paste. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp cho website của mình.

01. Demo

Link thư viện: https://fontawesome.com/v5/search
Danh sách icon bản miễn phí: https://fontawesome.com/v5/search?m=free

02. Cài đặt

Cách 1: Sử dụng link CDNCDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

Cách 2: Tải thư viện về hoặc một vài cách tải khác qua npm - yarn ...

03. Thêm thư viện vào trang web

Đối với link CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Đối với thư viện tải về, ta giải nén và link tới file all.min.css

Mẫu HTML cơ bản

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

04. Cách tìm icon và sử dụng

Các bạn lên trang web của họ có liệt kê toàn bộ icon, tìm tên icon bằng tiếng anh, ở đây mình tìm các icon của useruser

https://fontawesome.com/v5/search?q=user&m=free

Click chọn icon bạn thấy thích, ở đây mình chọn icon user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.

Tên icon
Kiểu icon và prefix
Mã unicode
Mã html
Tag loại nhóm
Phiên bản hỗ trợ

Nếu là:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

3 thì là bản PRO trả phí mới dùng được

05. Color Icons

Thay đổi màu sắc của icon

<i class="fas fa-clock" style="color: red;">i>
<i class="fas fa-clock" style="color: blue;">i>
<i class="fas fa-clock" style="color: green;">i>
<i class="fas fa-clock" style="color: pink;">i>
<i class="fas fa-clock" style="color: #000;">i>

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

<i class="fas fa-clock fa-xs">i>
<i class="fas fa-clock fa-sm">i>
<i class="fas fa-clock fa-lg">i>
<i class="fas fa-clock fa-2x">i>
<i class="fas fa-clock fa-5x">i>
<i class="fas fa-clock fa-10x">i>

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

<ul class="fa-ul">
  <li>
    <span class="fa-li"><i class="fas fa-check-square">i>span>List Item
  li>
  <li>
    <span class="fa-li"><i class="fas fa-spinner fa-pulse">i>span>List Item
  li>
  <li>
    <span class="fa-li"><i class="fas fa-square">i>span>List Item
  li>
ul>

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x">i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse">i>
span>
<br>
<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x">i>
  <i class="fab fa-twitter fa-stack-1x">i>
span>
<br>
<span class="fa-stack fa-lg">
  <i class="fas fa-camera fa-stack-1x">i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;">i>
span>

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

0

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

1

Kết quả:

06. Sizing Icons

Sử dụng các class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

4

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

6

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

7

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

8

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

9

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

0

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

2

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

3

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

4

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

5 để điều chỉnh kích thước icon

07. Icon in a List

Sử dụng class

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

6 và

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

7 để thay thế style mặc định của ul

08. Animating Iconsfont-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free là Solid và Brands còn 3 kiểu pro (trả phí) là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị.

Sử dụng class

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

8 để xoay tròn icon liên tục.font-weight tương ứng cho mỗi kiểu, xem bảng bên dưới để tìm giá trị.

Sử dụng class

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrungtitle>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
head>
<body>
	
body>
html>

9 để xoay tròn icon với 8 bước di chuyển.Unicode tương ứng cho icon bạn muốn, xem bảng cheatsheet để tìm giá trị.

10. Stacking Icons	Để ghép hai icon ta sử dụng class `https://fontawesome.com/v5/search?q=user&m=free` 2 trên lớp bao ngoài, class `https://fontawesome.com/v5/search?q=user&m=free` 3 cho icon có kích thước nhỏ và `https://fontawesome.com/v5/search?q=user&m=free` 4 cho icon lớn hơn, class `https://fontawesome.com/v5/search?q=user&m=free` 5 được sử dụng để đổi sang màu đối ngược.	font-weight	font-family
11. Fixed-Width Icons	Các icon có độ rộng khác nhau nên ta sử dụng class `https://fontawesome.com/v5/search?q=user&m=free` 6 để đặt icon có độ rộng cố định.	900	12. Bordered + Pulled Icons
Class `https://fontawesome.com/v5/search?q=user&m=free` 7, `https://fontawesome.com/v5/search?q=user&m=free` 8 hoặc `https://fontawesome.com/v5/search?q=user&m=free` 9 cho dấu ngoặc kép hoặc icon bài viết.	Các icon có độ rộng khác nhau nên ta sử dụng class `https://fontawesome.com/v5/search?q=user&m=free` 6 để đặt icon có độ rộng cố định.	400	12. Bordered + Pulled Icons
Class `https://fontawesome.com/v5/search?q=user&m=free` 7, `https://fontawesome.com/v5/search?q=user&m=free` 8 hoặc `https://fontawesome.com/v5/search?q=user&m=free` 9 cho dấu ngoặc kép hoặc icon bài viết.	13. [Advanced] CSS Pseudo-elements	400	Với một vài dự án đôi khi chúng ta không thể thêm icon trực tiếp vào HTML được nhưng không sao vẫn có cách thêm bằng CSS. CSS có một tính năng mạnh mẽ được gọi là Pseudo-element. Font Awesome đã tận dụng yếu tố pseudo-element `<i class="fas fa-clock" style="color: red;">i> <i class="fas fa-clock" style="color: blue;">i> <i class="fas fa-clock" style="color: green;">i> <i class="fas fa-clock" style="color: pink;">i> <i class="fas fa-clock" style="color: #000;">i>` 0 để thêm các icon vào trong trang web.
Các bước thực hiện	13. [Advanced] CSS Pseudo-elements	300	Với một vài dự án đôi khi chúng ta không thể thêm icon trực tiếp vào HTML được nhưng không sao vẫn có cách thêm bằng CSS. CSS có một tính năng mạnh mẽ được gọi là Pseudo-element. Font Awesome đã tận dụng yếu tố pseudo-element `<i class="fas fa-clock" style="color: red;">i> <i class="fas fa-clock" style="color: blue;">i> <i class="fas fa-clock" style="color: green;">i> <i class="fas fa-clock" style="color: pink;">i> <i class="fas fa-clock" style="color: #000;">i>` 0 để thêm các icon vào trong trang web.
Các bước thực hiện	13. [Advanced] CSS Pseudo-elements	900	Với một vài dự án đôi khi chúng ta không thể thêm icon trực tiếp vào HTML được nhưng không sao vẫn có cách thêm bằng CSS. CSS có một tính năng mạnh mẽ được gọi là Pseudo-element. Font Awesome đã tận dụng yếu tố pseudo-element `<i class="fas fa-clock" style="color: red;">i> <i class="fas fa-clock" style="color: blue;">i> <i class="fas fa-clock" style="color: green;">i> <i class="fas fa-clock" style="color: pink;">i> <i class="fas fa-clock" style="color: #000;">i>` 0 để thêm các icon vào trong trang web.

Các bước thực hiện

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

2

Thiết lập css chung cho tất cả icon

Xác định font-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free là Solid và Brands còn 3 kiểu pro (trả phí) là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị.

Xác định font-weight tương ứng cho mỗi kiểu, xem bảng bên dưới để tìm giá trị.

Xác định Unicode tương ứng cho icon bạn muốn, xem bảng cheatsheet để tìm giá trị.

http://completejavascript.com/toi-uu-font-awesome-voi-icomoon
https://viblo.asia/p/tao-icon-font-voi-icomoon-WAyK8e1eZxX

Style
Availability
Solid

programming sheet Font Awesome 4 Cdnjs font awesome Download Font Awesome Font Awesome CSS Font Awesome icon

Hướng dẫn font awesome 5 cheatsheet - phông chữ tuyệt vời 5 cheatsheet

01. Demo

02. Cài đặt

03. Thêm thư viện vào trang web

04. Cách tìm icon và sử dụng

05. Color Icons

06. Sizing Icons

06. Sizing Icons

06. Sizing Icons

06. Sizing Icons

06. Sizing Icons

06. Sizing Icons

Xác định font-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free là Solid và Brands còn 3 kiểu pro (trả phí) là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị.

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội