[Tự Học CSS] Tìm Hiểu Mọi Thứ Về Icons(biểu Tượng) Và Links(liên ...
Có thể bạn quan tâm
🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥
Cafedev chia sẻ cho ace về icons, link trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.
Nội dung chính
- 1. ICON trong CSS
- 1.1. Làm thể nào để thêm icon
- 1.2. Font Awesome Icons
- 1.3 Bootstrap Icons
- 1.4 Google Icons
- 2. Links trong CSS
- 2.1. Links với style
- 2.2. Text Decoration
- 2.3 Background Color
- 2.4. Link Buttons
- Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!
1. ICON trong CSS
1.1. Làm thể nào để thêm icon
Cách đơn giản nhất để thêm biểu tượng(icon) vào trang HTML của bạn là sử dụng thư viện icon, chẳng hạn như Font Awesome.
Thêm tên của lớp icon được chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như <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, là các vectơ có thể mở rộng và có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v.)
1.2. Font Awesome Icons
Để sử dụng các biểu tượng Font Awesome, hãy truy cập fontawesome.com, đăng nhập và nhận code để 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!
<!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>Copy and chạy code
1.3 Bootstrap Icons
Để sử dụng các glyphicons Bootstrap, hãy thêm dòng sau vào trong 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 tải xuống hoặc cài đặt!
<!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>Copyand chạy code
1.4 Google Icons
Để sử dụng các biểu tượng của Google, hãy thêm dòng sau vào bên trong 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 tải xuống hoặc cài đặt!
<!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>2. Links trong CSS
2.1. Links với style
Các liên kết có thể được tạo kiểu với bất kỳ thuộc tính CSS nào (ví dụ: color, font-family, background, v.v.).
<!DOCTYPE html> <html> <head> <style> a { color: hotpink; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> </body> </html>Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.
Bốn trạng thái liên kết là:
- a:link– một liên kết bình thường, không được truy cập
- a:visited – liên kết mà người dùng đã truy cập
- a:hover – một liên kết khi người dùng di chuột qua nó
- a:active – một liên kết tại thời điểm nó được nhấp vào
Khi đặt kiểu cho một số trạng thái liên kết, có một số quy tắc thứ tự:
- a: hover PHẢI đến sau a:link và a:visited
- a:active PHẢI đến sau after a:hover
2.2. Text Decoration
Thuộc tính text-decoration chủ yếu được sử dụng để xóa gạch dưới khỏi các liên kết:
<!DOCTYPE html> <html> <head> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>2.3 Background Color
<!DOCTYPE html> <html> <head> <style> a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>2.4. Link Buttons
Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng boxes / nút:
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <h2>Link Button</h2> <p>A link styled as a button:</p> <a href="default.asp" target="_blank">This is a link</a> </body> </html>Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
- Group Facebook
- Fanpage
- Youtube
- Trang chủ
Chào thân ái và quyết thắng!
Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!
Từ khóa » Cách Thêm Icon Vào Html
-
Icon Trong CSS
-
Bài 14: CSS Icons (Thêm Biểu Tượng Vào Trang Web) - Tìm ở đây
-
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
-
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