CSS Icons

21/05/2019

Bài sau » « Bài trước

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

Bài sau » « Bài trước
Back to top