Bài 18: Cách sử dụng Icons trong css

Cách sử dụng Icons trong css

Trong CSS, bạn có thể sử dụng các biểu tượng (icons) để thêm các hình ảnh nhỏ vào trang web của mình. Các biểu tượng này thường được sử dụng để chỉ định chức năng của các nút hoặc liên kết.

Có nhiều cách để sử dụng biểu tượng trong CSS, dưới đây là một số cách phổ biến:

1. Sử dụng biểu tượng được cung cấp sẵn trong CSS:

CSS cung cấp một số biểu tượng được định nghĩa sẵn, ví dụ như biểu tượng "x" để đóng một cửa sổ. Bạn có thể sử dụng các biểu tượng này bằng cách sử dụng các ký hiệu Unicode.

Ví dụ:

/* Use "x" icon for close button */
.close-button::before {
  content: "\2715";
}

Trong đó, \2715 là ký hiệu Unicode cho biểu tượng "x".

2. Sử dụng biểu tượng từ thư viện biểu tượng (icon library):

Có rất nhiều thư viện biểu tượng khác nhau, ví dụ như Font Awesome, Material Icons, hay Ionicons. Bạn có thể sử dụng các thư viện này bằng cách thêm đoạn mã HTML và CSS được cung cấp vào trang web của mình.

Ví dụ:

<!-- Add Font Awesome to the page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<!-- Use "thumbs-up" icon from Font Awesome -->
<i class="fas fa-thumbs-up"></i>

Trong đó, fas là tên của font chữ trong Font Awesome, fa-thumbs-up là tên của biểu tượng.

3. Tạo biểu tượng tùy chỉnh từ hình ảnh:

Bạn có thể tạo biểu tượng tùy chỉnh bằng cách sử dụng hình ảnh và CSS.

Ví dụ:

/* Use custom icon from image */
.custom-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: cover;
}

Trong đó, icon.png là tên tệp hình ảnh của biểu tượng. Bằng cách sử dụng các thuộc tính CSS như width, height, và background-size, bạn có thể điều chỉnh kích thước của biểu tượng để phù hợp với nhu cầu của mình.