Hướng dẫn biểu tượng
Cách thêm biểu tượng
Để chèn một biểu tượng, hãy thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nội tuyến nào.
Phần tử <i> và <span> được sử dụng rộng rãi để thêm biểu tượng.
Tất cả các biểu tượng trong thư viện biểu tượng bên dưới đều là các biểu tượng vectơ có thể mở rộng và có thể tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v.)
Phông chữ tuyệt vời 5 biểu tượng
Để sử dụng các biểu tượng Free Font Awesome 5, hãy truy cập fontawesome.com và đăng nhập để nhận mã để sử dụng trong các trang web của bạn.
Đọc thêm về cách bắt đầu với Font Awesome trong chương Font Awesome 5 của chúng tôi.
Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/ yourcode .js" crossorigin="anonymous"></script>
<!--Get your code at fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i
class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
Hãy tự mình thử »Phông chữ tuyệt vời 4 biểu tượng
Để sử dụng biểu tượng Font Awesome 4, hãy thêm dòng sau vào phần <head> trên trang HTML của bạn:
Lưu ý: Không cần tải xuống hoặc cài đặt!
Ví dụ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Hãy tự mình thử » Biểu tượng Bootstrap 3
Để sử dụng glyphicons Bootstrap 3, hãy thêm dòng sau vào bên trong phần <head> của trang HTML của bạn:
Lưu ý: Không cần tải xuống hoặc cài đặt!
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>
Hãy tự mình thử »Lưu ý: Glyphicons không được hỗ trợ trong Bootstrap 4.
Để biết thêm thông tin về Bootstrap 3 và Glyphicons, hãy truy cập Hướng dẫn Bootstrap 3 của chúng tôi.
Biểu tượng Google
Để sử dụng các biểu tượng Google, hãy thêm dòng sau vào bên trong phần <head> trên trang HTML của bạn:
Lưu ý: Không cần tải xuống hoặc cài đặt!
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>
Hãy tự mình thử »Để có danh sách đầy đủ TẤT CẢ các biểu tượng (phông chữ tuyệt vời, bootstrap và google), hãy truy cập Tham khảo biểu tượng .
