Thêm icon trong CSS
Cách đơn giản nhất để thêm icon vào trang HTML của bạn đó là dùng thư viện icon, giống như Font Awesome. Thêm tên của lớp icon vào bên trong phần tử HTML (như <i> hoặc <span>). Dưới đây là tổng hợp tất cả thư viện icon mà bạn có thể sử dụng, bao gồm cả ...
Cách đơn giản nhất để thêm icon vào trang HTML của bạn đó là dùng thư viện icon, giống như Font Awesome. Thêm tên của lớp icon vào bên trong phần tử HTML (như <i> hoặc <span>). Dưới đây là tổng hợp tất cả thư viện icon mà bạn có thể sử dụng, bao gồm cả dạng vector cho bạn tùy chỉnh CSS (kích thước, màu sắc, đổ bóng…).
Font Awesome Icons
Để sử dụng Font Awesome icon, thêm đoạn mã dưới đây vào bên trong thẻ <head> của trang HTML:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Lưu ý: không khuyến nghị tải về hoặc cài đặt icon.
<!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>
Kết quả là:
Bootstrap Icons
Để sử dụng Bootstrap icon, thêm dòng mã dưới đây bên trong thẻ <head> của trang HTML:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
Lưu ý: không khuyến nghị tải về 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>
Kết quả là:
Google Icons
Để sử dụng Google icon, thêm dòng mã dưới đây vào bên trong thẻ <head> của trang HTML:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Lưu ý: không khuyến nghị tải về 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>
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
