Bài 14: CSS Icons (Thêm Biểu Tượng Vào Trang Web) - Tìm ở đây

Trang chủ » Cách Dùng Icon Trong Html » Bài 14: CSS Icons (Thêm Biểu Tượng Vào Trang Web) - Tìm ở đây

Có thể bạn quan tâm

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 của bạn là sử dụng thư viện biểu tượng (icon), chẳng hạn như Font Awesome.

Thêm tên của biểu tượng mong muốn vào phần tử HTML nội dòng (inline HTML). Như <i> hoặc <span>.

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

Thư viện Font Awesome

Để sử dụng các biểu tượng của thư viện 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>

Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm!

Ví dụ:

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

Biểu tượng Bootstrap

Để sử dụng glyphicons Bootstrap, hãy thêm dòng sau vào phần<head> trong 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 tải xuống hoặc cài đặt gì thêm!

Ví dụ:

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

Biểu tượng Google

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

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

Lưu ý: Không cần tải xuống hoặc cài đặt gì thêm!

Ví dụ:

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

Từ khóa » Cách Dùng Icon Trong Html