CSS Icons là một phần quan trọng của thiết kế web hiện đại, thể hiện trực quan các hành động. CSS icons cung cấp một cách hấp dẫn để tích hợp các biểu tượng tùy chỉnh. CSS Icons từ nhiều thư viện có thể dễ dàng tạo kiểu và tùy chỉnh với CSS. Kích thước, màu sắc, bóng đổ và nhiều thuộc tính khác có thể thay đổi. Các biểu tượng này đóng vai trò là yếu tố đồ họa trực quan, tăng cường điều hướng. Chúng cũng truyền tải ý nghĩa cụ thể cho người dùng.
Chọn và triển khai CSS Icons từ các thư viện
Việc triển khai CSS icons từ các thư viện giúp tăng tính thẩm mỹ cho trang web. Nó cũng cải thiện chức năng trang web của bạn. Dưới đây là cách bạn có thể tích hợp và tùy chỉnh các biểu tượng một cách hiệu quả. Bạn có thể sử dụng các thư viện phổ biến sau:
- Font Awesome Icons
- Google Icons
- Bootstrap Icons
Cách thêm Icons
Đây là quy trình chung để sử dụng thư viện CSS icon:
- Chọn thư viện bạn thích và tìm CDN link cho các biểu tượng bạn muốn dùng.
- Thêm CDN link vào phần
<head>của tài liệu HTML. - Thêm tên class icon mong muốn vào các phần tử HTML, thường là thẻ
<span>hoặc<i>.
Note: Tất cả các thư viện nói trên không yêu cầu tải xuống hoặc cài đặt.
. Font Awesome Icons
Font Awesome là thư viện biểu tượng được sử dụng rộng rãi, cung cấp bộ biểu tượng toàn diện. Để tích hợp Font Awesome icons vào dự án của bạn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Cú pháp:
<i class="fa fa-cloud"></i>
Chúng ta có thể sử dụng thuộc tính font-size để tạo các biểu tượng kích thước lớn để hiển thị. Ví dụ dưới đây minh họa việc sử dụng thuộc tính font-size.
Example 1: Trong ví dụ này, chúng ta đã sử dụng thuộc tính font-size với mỗi class biểu tượng. Giá trị của thuộc tính này được đặt thành 32px.
HTML<!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>
<h1>GeeksforGeeks</h1>
<i class="fa fa-cloud" style="font-size:32px;">
</i>
<i class="fa fa-heart" style="font-size:32px;">
</i>
<i class="fa fa-file" style="font-size:32px;">
</i>
<i class="fa fa-car" style="font-size:32px;">
</i>
<i class="fa fa-bars" style="font-size:32px;">
</i>
</body>
</html>
Output:
Example 2: Trong ví dụ này, chúng ta đã sử dụng class "fa fa-heart" có thuộc tính font-size. Thuộc tính màu có giá trị lần lượt là 28px và đỏ, xanh lam.
HTML<!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>
<h1>GeeksforGeeks</h1>
<i class="fa fa-heart" style="font-size:28px;color:red;">
</i>
<i class="fa fa-heart" style="font-size:30px;color:blue;">
</i>
<i class="fa fa-heart" style="font-size:32px;color:red;">
</i>
<i class="fa fa-heart" style="font-size:34px;color:blue;">
</i>
<i class="fa fa-heart" style="font-size:36px;color:red;">
</i>
</body>
</html>
Output:
. Google Icons
Google Icons có sẵn thông qua thư viện Google's Material Icons. Chúng cung cấp một bộ biểu tượng bóng bẩy, hiện đại và tích hợp mượt mà. Nó tích hợp với ngôn ngữ thiết kế của Google.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Cú pháp:
<i class="material-icons">cloud</i>
Vui lòng tham khảo bài viết How to use Google material icon as list-style in a webpage using HTML and CSS?. Bài viết này hướng dẫn cách sử dụng thuộc tính CSS với class được xác định trước.
Example 1: Trong ví dụ này, chúng ta đã sử dụng class "material-icons" với biểu tượng cần thiết.
HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>GeekforGeeks</h1>
<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>
Output:
Example 2: Trong ví dụ này, chúng ta đã sử dụng class "material-icons" với hình đám mây.
HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>GeekforGeeks</h1>
<i class="material-icons" style="font-size:30px;">
cloud
</i>
<i class="material-icons" style="font-size:40px;">
cloud
</i>
<i class="material-icons" style="font-size:50px;">
cloud
</i>
<i class="material-icons" style="font-size:60px;">
cloud
</i>
<i class="material-icons" style="font-size:70px;">
cloud
</i>
</body>
</html>
Output:
. Bootstrap Icons
Bootstrap Icons cung cấp một bộ sưu tập các biểu tượng được thiết kế riêng cho người dùng Bootstrap. Nó tăng cường khả năng tương thích và tích hợp trong các dự án dựa trên Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Cú pháp:
<i class="glyphicon glyphicon-cloud"></i>
Chúng ta có thể sử dụng thuộc tính font-size để tạo các biểu tượng kích thước lớn để hiển thị. Ví dụ dưới đây minh họa việc sử dụng thuộc tính font-size với class được xác định trước.
Example 1: Trong ví dụ này, chúng ta đã sử dụng thuộc tính font-size với mỗi class glyphicon. Tất cả giá trị được đặt thành các số khác nhau.
HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>GeekforGeeks</h1>
<i class="glyphicon glyphicon-cloud" style="font-size:28px;">
</i>
<i class="glyphicon glyphicon-user" style="font-size:30px;">
</i>
<i class="glyphicon glyphicon-thumbs-up" style="font-size:32px;">
</i>
<i class="glyphicon glyphicon-remove" style="font-size:34px;">
</i>
<i class="glyphicon glyphicon-envelope" style="font-size:36px;">
</i>
</body>
</html>
Output:
Example 2: Trong ví dụ này, chúng ta đã sử dụng class "glyphicon glyphicon-thumbs-up" với hình dạng ngón tay cái hướng lên. Tất cả các giá trị được đặt thành các số khác nhau.
HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>GeekforGeeks</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>
Output:
