CSS Icons
21/05/2019
Add icon như thế nào ?
Cách đơn giản nhất để add icon vào website là dùng thư viện có sẵn, ví dụ như Font Awesome, Bootstrap icon, Google icon.
Khi sử dụng các thư viện icon có sẵn thì ta phải truyền đúng tên class vào thẻ HTML ( <i> hoặc <span> ).
Tất cả các icon của thư việc dưới đây co giãn theo vector nên ta có thể chỉnh sửa với CSS (size, color,....)
Font Awesome icons
Để sử dụng font Awesome icon chỉ cần copy đoạn code sau và đặt trong thẻ <head> của trang web.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous" >
Chú ý: Không cần download hoặc cài đặt !
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</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ả hiển thị
Bootstrap icons
Để sử dụng Bootstrap icon chỉ cần copy đoạn code sau và đặt trong thẻ <head> của trang web.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
Chú ý: Không cần download 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ả hiển thị :
Google icons
Để sử dụng Google icon chỉ cần copy đoạn code sau và đặt trong thẻ <head> của trang web.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
Chú ý: Không cần download 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>
Kết quả hiển thị:
cloud favorite attachment computer traffic
