Biểu tượng html sao chép dán

Question

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 biểu tượng miễn phí, rất dễ dàng để tích hợp vào trang web, công việc của bạn bây giờ là biểu tượng lựa chọn và sao chép. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần sử dụng bản miễn phí là đủ để làm đẹp cho trang web của mình

Nội dung chính Show

01. Thử nghiệm
02. Cài đặt
03. Thêm thư viện vào trang web
04. Cách tìm biểu tượng và cách sử dụng
05. Biểu tượng màu
06. Định cỡ biểu tượng
07. Biểu tượng trong Danh sách
08. Biểu tượng động
09. Xoay và lật các biểu tượng
10. Biểu tượng xếp chồng lên nhau
11. Biểu tượng có chiều rộng cố định
12. Các biểu tượng có viền + kéo
13. [Nâng cao] Phần tử giả CSS
14. [Nâng cao] Phông chữ tối ưu Tuyệt vời với IcoMoon

01. Thử nghiệm

Liên kết thư viện. https. // phông chữ tuyệt vời. com/v5/tìm kiếm
Danh sách icon bản miễn phí. https. // phông chữ tuyệt vời. com/v5/search?m=free

02. Cài đặt

Cách 1. Sử dụng liên kết CDN

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 chiếu với liên kết CDN

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

Đối chiếu với thư viện tải về, giải nén và liên kết tới tệp tất cả. tối thiểu. 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 biểu tượng và cách sử dụng

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

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

Cách tìm icon fontawesome 5

Nhấp vào biểu tượng chọn mà bạn thích, ở đây mình chọn biểu tượng user-tag, để sử dụng bạn chỉ cần sao chép đoạn mã vào trang web là xong

Cách tìm icon fontawesome 5

Tên biểu tượng
Kiểu biểu tượng và tiền tố
mã unicode
Mã html
Gắn thẻ loại nhóm
Support version

If is.

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 thì bản PRO trả phí mới được sử dụng

05. Biểu tượng màu

Change color of 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ả

color icons fontawesome 5

06. Định cỡ biểu tượng

Sử dụng các lớp

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

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

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

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

0

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

1

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

2

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

3

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

4

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

5

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

6

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

7

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

8 để điều chỉnh kích thước biểu tượng

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

8

Kết quả

sizing icons fontawesome 5

07. Biểu tượng trong Danh sách

Use class

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

9 and

<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 to instead style default of ul

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

Kết quả

icon in a list fontawesome 5

08. Biểu tượng động

Sử dụng lớp

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

1 để xoay tròn biểu tượng liên tục

Sử dụng lớp

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

2 để xoay tròn biểu tượng với 8 bước chuyể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>

4

Kết quả

animating icons fontawesome 5

09. Xoay và lật các biểu tượng

Sử dụng lớp

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

3 và

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

4 để xoay và đặt biểu tượng

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

Kết quả

rotating and fliping icons fontawesome 5

10. Biểu tượng xếp chồng lên nhau

Để ghép hai biểu tượng, ta sử dụng lớp

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

5 trên lớp bao ngoài, lớp

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

6 cho biểu tượng có kích thước nhỏ và lớp

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

7 cho biểu tượng lớn hơn, lớp

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

8 được sử dụng để đổi màu đối lập

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

2

Kết quả

stacking icons fontawesome 5

11. Biểu tượng có chiều rộng cố định

Các icon có độ rộng khác nhau nên ta sử dụng lớp

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

9 để đặt icon có độ rộng cố định

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

0

Kết quả

fixed width icons fontawesome 5

12. Các biểu tượng có viền + kéo

Lớp ________ 180, ________ 181 hoặc ________ 182 cho dấu trích kép hoặc biểu tượng bài viết

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

1

Kết quả

bordered pulled icons fontawesome 5

13. [Nâng cao] Phần tử giả CSS

Với một vài dự án đôi khi chúng ta không thể thêm biểu tượng 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

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

83 để thêm các biểu tượng vào trong trang web

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

Thiết lập css chung cho tất cả các biểu tượng
Specify font-family tương ứng với từng kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu miễn phí 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ị
Specify font-weight tương ứng với từng kiểu, xem bảng bên dưới để tìm giá trị
Xác định Unicode tương ứng cho biểu tượng bạn muốn, xem bảng cheatsheet để tìm giá trị

Phong cách Tính khả dụngphông chữ-trọng lượng chữ-gia đìnhSolidGói miễn phí900

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

84 hoặc

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

85 (dành cho người dùng chuyên nghiệp)Thương hiệuGói miễn phí400

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

86Yêu cầu gói Pro thông thường400

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

85Yêu cầu gói LightPro300

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

85Yêu cầu gói DuotonePro900

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

89

Ví dụ

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

2

Kết quả

pseudo element fontawesome 5

14. [Nâng cao] Phông chữ tối ưu Tuyệt vời với IcoMoon

Phông chữ tuyệt vời 5 hỗ trợ trên 1600 biểu tượng miễn phí, tuy nhiên nếu bạn chỉ muốn sử dụng khoảng 10 đến 20 biểu tượng trong đó. thì bạn vẫn phải tải xuống toàn bộ kiểu của Phông chữ tuyệt vời, điều này cho kết quả thực tế là chưa tối ưu. Một câu hỏi đặt ra là làm sao mình vẫn sử dụng được Font Awesome mà chỉ cần tải về style của những icon mình dùng?

programming html

Biểu tượng html sao chép dán

01. Thử nghiệm

02. Cài đặt

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

04. Cách tìm biểu tượng và cách sử dụng

05. Biểu tượng màu

06. Định cỡ biểu tượng

07. Biểu tượng trong Danh sách

08. Biểu tượng động

09. Xoay và lật các biểu tượng

10. Biểu tượng xếp chồng lên nhau

11. Biểu tượng có chiều rộng cố định

12. Các biểu tượng có viền + kéo

13. [Nâng cao] Phần tử giả CSS

14. [Nâng cao] Phông chữ tối ưu Tuyệt vời với IcoMoon

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