css icons

Chúng ta có thể dễ dàng thêm các biểu tượng icon vào trang web HTML bằng cách sử dụng các thư viện icon có sẵn, chẳng hạn như thư viện Font Awesome.

Để thêm biểu tượng icon vào văn bản, chúng ta chèn class tên icon được chỉ định vào phần tử nội tuyến như <i> hoặc <span>.

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

Font Awesome Icons

Để sử dụng các biểu tượng Font Awesome, chúng ta truy cập trang web fontawesome.com , đăng ký/nhập và nhận mã, sau đó chúng ta thêm vào bên trong cặp thẻ <head></head> của trang web, và sau đó sử dụng.

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

Lưu ý: Thư viện font awesome không cần tải xuống hoặc cài đặt!

Ví dụ

<script src="https://kit.fontawesome.com/6fed1ff658.js" crossorigin="anonymous"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>

Xem kết quả

Icons Bootstrap

Để sử dụng các glyphicons Bootstrap, chúng ta thêm dòng code sau vào bên trong cặp thẻ <head></head> của trang web HTML.

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

Lưu ý: Thư viện icon bootstrap không cần tải xuống hoặc cài đặt!

Ví dụ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>

Xem kết quả

Icons Google

Để sử dụng các icon google, chúng ta thêm dòng code sau vào bên trong cặp thẻ <head></head> của trang web HTML.

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

Lưu ý: Thư viện icon google không cần tải xuống hoặc cài đặt!

Ví dụ

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>