Icon trong CSS

Thứ hai - 27/10/2025 23:27

Icon trong HTML được sử dụng rất nhiều. Dưới đây là những điều bạn cần biết về icon CSS HTML.

CSS (Cascading Style Sheets) là một ngôn ngữ được thiết kế để đơn giản hóa quá trình trình bày trang web.

Nó cho phép bạn áp dụng các kiểu cho tài liệu HTML bằng cách chỉ định màu sắc, phông chữ, khoảng cách và vị trí.
Ưu điểm chính là việc tách biệt nội dung (trong HTML) và kiểu (trong CSS), đồng thời các quy tắc CSS có thể được sử dụng trên toàn bộ trang mà không cần phải viết lại.
HTML sử dụng thẻ, còn CSS sử dụng bộ quy tắc.
Các kiểu CSS được áp dụng cho phần tử HTML bằng cách sử dụng bộ chọn.

Tại sao nên dùng CSS?

Tiết kiệm thời gian: Viết CSS một lần và sử dụng lại trên nhiều trang HTML.
Dễ dàng bảo trì: Thay đổi kiểu dáng toàn cục chỉ với một lần chỉnh sửa.
Thân thiện với công cụ tìm kiếm: Kỹ thuật mã hóa gọn gàng giúp cải thiện khả năng đọc cho các công cụ tìm kiếm.
Kiểu dáng vượt trội: Cung cấp nhiều thuộc tính hơn so với HTML.
Duyệt ngoại tuyến: CSS có thể lưu trữ các ứng dụng web cục bộ bằng bộ nhớ đệm ngoại tuyến, cho phép xem ngoại tuyến.

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.

Những câu hỏi thường gặp về icon trong CSS

Icon CSS là gì?

Biểu tượng CSS là các yếu tố đồ họa được sử dụng trong thiết kế web để thể hiện hành động, đối tượng hoặc ý tưởng. Chúng thường được triển khai bằng phông chữ biểu tượng (như Font Awesome, Material Icons) hoặc hình ảnh SVG, và giao diện của chúng có thể được định dạng bằng các thuộc tính CSS.

Làm thế nào để thêm biểu tượng CSS vào trang web?

Phương pháp này phụ thuộc vào thư viện biểu tượng hoặc cách tiếp cận bạn chọn:

Phông chữ biểu tượng (ví dụ: Font Awesome, Google Material Icons): Liên kết tệp CSS hoặc JavaScript của thư viện trong phần <head> của HTML, sau đó sử dụng các phần tử <i> hoặc <span> cụ thể với các lớp biểu tượng tương ứng trong phần thân HTML.

Biểu tượng SVG: Nhúng mã SVG trực tiếp vào HTML của bạn hoặc liên kết đến tệp SVG bên ngoài và sử dụng phần tử <use> để hiển thị từng biểu tượng.

Nguồn tin: Quantrimang.com: