14. Icon Trong CSS

Icon trong CSS: bạn có thể sử dụng biểu tượng (icon) để thêm hình ảnh nhỏ hoặc biểu tượng trực tiếp vào trang web của bạn. Có nhiều cách để thực hiện việc này, dưới đây là một số cách phổ biến:

Sử dụng Font Awesome hoặc Icon Fonts: Thư viện như Font Awesome cung cấp một tập hợp các biểu tượng sử dụng phông chữ đặc biệt. Bạn chỉ cần thêm thẻ <link> vào tệp HTML của bạn và sau đó sử dụng các lớp CSS để thêm biểu tượng vào phần tử.

html

<!-- Đã thêm liên kết đến Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<!-- Sử dụng biểu tượng từ Font Awesome -->
<i class="fas fa-heart"></i> <!-- Biểu tượng tim -->
<i class="fas fa-envelope"></i> <!-- Biểu tượng thư -->

Sử dụng Ảnh PNG hoặc SVG: Bạn có thể sử dụng hình ảnh PNG hoặc SVG làm biểu tượng. Bạn có thể thêm chúng như hình ảnh bình thường bằng cách sử dụng thẻ <img> hoặc nền của phần tử.

html

<!-- Sử dụng ảnh PNG làm biểu tượng -->
<img src="icon.png" alt="Icon">

<!-- Sử dụng ảnh SVG làm biểu tượng -->
<svg width="16" height="16" viewBox="0 0 16 16">
  <path d="M8 0L16 16H0L8 0z" fill="black"/>
</svg>

Tạo Biểu Tượng bằng CSS: Bạn có thể tạo biểu tượng bằng CSS bằng cách sử dụng các thuộc tính như width, height, background, và border-radius.

html

<!-- Sử dụng phần tử div để tạo biểu tượng -->
<div class="icon"></div>

css

/* Định dạng biểu tượng bằng CSS */
.icon {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 50%;
}

Các cách trên đều cho phép bạn thêm biểu tượng vào trang web của bạn. Tùy thuộc vào nhu cầu và thiết kế của bạn, bạn có thể lựa chọn cách tốt nhất cho dự án của mình.

Leave a Comment Cancel Reply