Ícon CSS

Cách thêm biểu tượng

Cách đơn giản nhất để thêm biểu tượng vào trang HTML là sử dụng thư viện biểu tượng, chẳng hạn như Font Awesome.

Thêm tên lớp biểu tượng đã chỉ định vào bất kỳ phần tử HTML nội bộ nào (ví dụ: <i> hoặc <span>).

Tất cả các biểu tượng trong thư viện biểu tượng bên dưới đều là vector có thể thay đổi kích thước, có thể tùy chỉnh bằng CSS (kích thước, màu sắc, bóng đổ, v.v.).

Font Awesome biểu tượng

Nếu bạn muốn sử dụng biểu tượng Font Awesome, hãy truy cập fontawesome.com, đăng nhập và nhận mã để thêm vào phần <head> của trang HTML của bạn:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Xin vui lòng đọc thêm về cách bắt đầu sử dụng Font Awesome trong hướng dẫn Font Awesome 5 của chúng tôi.

Lưu ý:Không cần cài đặt!

Mô hình

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

Kết quả:

Thử ngay

Biểu tượng Bootstrap

Nếu bạn muốn sử dụng biểu tượng Bootstrap glyphicons, hãy thêm dòng sau vào phần <head> của trang HTML của bạn:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Lưu ý:Không cần cài đặt!

Mô hình

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

Kết quả:

Thử ngay

Biểu tượng Google

Nếu bạn muốn sử dụng biểu tượng Google, hãy thêm dòng sau vào phần <head> của trang HTML của bạn:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Lưu ý:Không cần cài đặt!

Mô hình

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>

Kết quả:

Thử ngay