Thêm icon trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

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ả 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>