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 Thêm Icon Vào Html
-
Icon Trong CSS
-
Cách Chèn Icon FontAwesome Vào Html Dễ Dàng
-
Cách Chèn Icon Trong CSS - Quản Trị Máy Tính
-
Chèn Icon Vào Website Bằng Font Awesome - đơn Giản Mà đẹp ...
-
Chèn Icon đẹp Vào Web Với Fontawesome
-
Cách Thêm Icon Vào Html/css | Nội Dung Về Chủ đề Chèn Icon Vào Html
-
Cách Dùng CSS Icons
-
[Tự Học CSS] Tìm Hiểu Mọi Thứ Về Icons(biểu Tượng) Và Links(liên ...
-
Cách Thêm Icon Font Awesome Vào Tiêu đề Widget Trong Wordpress
-
Tạo Icon Từ SVG (P1) - Viblo
-
Bài 17 - Cách Sử Dụng Icon Font Trong Thiết Kế Web - Viblo
-
Bài 11: Sử Dụng Icon Font Awesome - Khóa Học HTML Và CSS
-
Thêm Icon Trong CSS - Code 24h
-
Hướng Dẫn Tạo Icon Bar Với HTML, CSS Và Javascript - Freetuts