Icon trong CSS
Icon trong HTML là một trong những kiến thức cơ bản mà người dùng CSS cần biết. Dưới đây là cách sử dụng icon CSS.
Icon - Biểu tượng là một cách mạnh mẽ để tăng cường sức hấp dẫn trực quan cho các trang HTML của bạn, cung cấp một biểu diễn rõ ràng và súc tích về nhiều thành phần khác nhau. Tận dụng các thư viện biểu tượng giúp đơn giản hóa quy trình này, cung cấp một loạt các biểu tượng vector có thể mở rộng và dễ dàng tùy chỉnh bằng CSS. Trong hướng dẫn này, chúng ta sẽ cùng nhau khám phá những điều cần biết về icon trong CSS, bao gồm ba thư viện biểu tượng phổ biến — Font Awesome, Bootstrap Icons và Google Icons — và trình bày cách tích hợp chúng một cách liền mạch vào các dự án của bạn.
Cách thêm icon
Cách đơn giản nhất để thêm icon (biểu tượng) vào trang HTML là dùng thư viện biểu tượng. như Font Awesome, chỉ cần thêm tên của lớp icon đó vào bất kì phần tử HTML nội dòng nào (như <i> hay <span>). Tất cả những icon trong thư viện icon dưới đây đều thuộc dạng vector có thể phóng to (scale) trong CSS (kích thước, màu sắc, bóng…)
Font Awesome Icon
Để dùng icon của Font Awesome, thêm dòng dưới đây vào phần <head> trong trang HTML. Bạn không cần phải tải hay cài đặt gì cả.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
VÍ dụ icon bằng Font Awesome
<!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>
Hình ảnh các icon trong ví dụ trên trình duyệt
Bootstrap Icon
Để dùng icon của Bootstrap, thêm dòng dưới đây vào phần <head> trong trang HTML. Cách này cũng không cần tải hay cài đặt gì.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Ví dụ icon bằng Bootstrap
<!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>
Bootstrap là lựa chọn khá phổ biến để lấy icon cho trang HTML
Ví dụ khác:
Ở ví dụ này, chúng ta đã dùng class “glyphicon glyphicon-thumbs-up” với hình dạng ngón tay cái giơ lên & tất cả giá trị đều được thiết lập sang số khác nhau.
Code mẫu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>Quantrimang</h1>
<i class="glyphicon glyphicon-thumbs-up"
style="font-size:20px;">
</i>
<i class="glyphicon glyphicon-thumbs-up"
style="font-size:30px;">
</i>
<i class="glyphicon glyphicon-thumbs-up"
style="font-size:40px;">
</i>
<i class="glyphicon glyphicon-thumbs-up"
style="font-size:50px;">
</i>
<i class="glyphicon glyphicon-thumbs-up"
style="font-size:60px;">
</i>
</body>
</html>
Google Icon
Để dùng Google Icon, thêm dòng dưới đây vào phần <head>
trong trang HTML. Cũng như 2 cách trên, bạn không cần tải hay cài đặt gì.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Ví dụ Google Icon
<!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>
Google cũng có thư viện icon riêng cho nhà phát triển
Bằng cách kết hợp các thư viện biểu tượng này vào các dự án CSS, bạn có thể dễ dàng nâng cao sức hấp dẫn trực quan và trải nghiệm người dùng của trang HTML. Hãy thoải mái khám phá và tùy chỉnh nhiều biểu tượng mà mỗi thư viện cung cấp, cho phép bạn thể hiện sự sáng tạo của mình và đáp ứng các nhu cầu cụ thể của các nỗ lực phát triển web của bạn.
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Khối D01 thi môn nào, học ngành nào?
Hôm qua -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
2 ngày -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Hình nền trắng, ảnh nền trắng đẹp
2 ngày -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6 -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày