CSS - Icons: Hướng dẫn cơ bản về việc thêm vẻ đẹp trực quan cho trang web của bạn

Xin chào các ngôi sao tương lai của thiết kế web! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị vào thế giới của các biểu tượng CSS. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ hướng dẫn bạn từng bước trong chuyến phiêu lưu này. Vậy, hãy lấy cắp balo ảo của bạn và cùng tôi nhảy vào!

Tại sao biểu tượng lại quan trọng

Trước khi chúng ta bắt đầu, hãy để tôi chia sẻ một câu chuyện nhanh. Khi tôi mới bắt đầu dạy thiết kế web, một trong những học sinh của tôi đã tạo ra một trang web đẹp mắt nhưng quên không thêm biểu tượng. Nó giống như việc nướng bánh mà quên không thêm kem - vẫn có thể sử dụng được, nhưng thiếu đi cái touch đặc biệt. Biểu tượng giống như những hạt đường trang trí trên bánh cupcake của bạn - chúng làm cho mọi thứ trở nên hấp dẫn và thân thiện với người dùng hơn!

Thêm biểu tượng

Bây giờ, hãy cùng khám phá các cách khác nhau để thêm những hạt đường kỹ thuật số này vào các trang web của bạn. Chúng ta sẽ xem xét nhiều phương pháp, mỗi phương pháp có hương vị và trường hợp sử dụng riêng.

Biểu tượng CSS - Sử dụng các phần tử giả

Hãy bắt đầu với một kỹ thuật đơn giản nhưng mạnh mẽ: sử dụng các phần tử giả CSS để tạo biểu tượng.

.phone-icon::before {
content: "\260E";
font-size: 20px;
color: #333;
}

<span class="phone-icon"> Gọi chúng tôi</span>

Trong ví dụ này, chúng ta sử dụng phần tử giả ::before để thêm biểu tượng điện thoại trước văn bản "Gọi chúng tôi". \260E là Unicode cho biểu tượng điện thoại. Đúng là hay phải không?

Biểu tượng CSS - Sử dụng Font Awesome

Font Awesome giống như chiếc dao đa năng của các thư viện biểu tượng. Nó linh hoạt, dễ sử dụng và đầy đủ tùy chọn. Hãy xem cách thực hiện:

Đầu tiên, bao gồm tệp CSS của Font Awesome trong HTML của bạn:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Sau đó, bạn có thể sử dụng biểu tượng như thế này:

<i class="fas fa-heart"></i> Thích này!

Điều này sẽ hiển thị biểu tượng tim followed by the text "Thích này!". Nó giống như phép thuật, nhưng tốt hơn vì bạn hiểu cách nó hoạt động!

Biểu tượng CSS - Sử dụng hình ảnh nền

Đôi khi, bạn có thể muốn sử dụng biểu tượng tùy chỉnh của riêng mình. Đó là khi hình ảnh nền trở nên hữu ích:

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

<span class="custom-icon"></span> Kiểm tra biểu tượng tùy chỉnh của tôi!

Phương pháp này cho phép bạn sử dụng bất kỳ hình ảnh nào làm biểu tượng. Nó giống như có một canvas trống - khả năng là vô tận!

Biểu tượng CSS - Sử dụng Bootstrap Icons

Bootstrap, khung công tác CSS phổ biến, cũng cung cấp bộ biểu tượng riêng. Dưới đây là cách sử dụng:

Đầu tiên, bao gồm tệp CSS của Bootstrap Icons:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Sau đó, bạn có thể sử dụng biểu tượng như thế này:

<i class="bi-alarm"></i> Thức dậy!

Điều này sẽ hiển thị biểu tượng đồng hồ báo thức followed by the text "Thức dậy!". Nó giống như có một đồng hồ báo thức kỹ thuật số ngay trên trang web của bạn!

Biểu tượng CSS - Sử dụng Google Icons/Fonts

Google cũng cung cấp thư viện biểu tượng tuyệt vời. Hãy xem cách thực hiện:

Đầu tiên, bao gồm phông chữ Google Icons trong HTML của bạn:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Sau đó, bạn có thể sử dụng biểu tượng như thế này:

<i class="material-icons">cloud</i> Mây có cơ hội mã hóa

Điều này sẽ hiển thị biểu tượng mây followed by the text. Nó giống như có một dự báo thời tiết ngay trên trang web của bạn!

So sánh các phương pháp biểu tượng

Bây giờ, hãy so sánh tất cả các phương pháp này trong bảng tiện lợi:

Phương pháp	Ưu điểm	Nhược điểm
Phần tử giả	Đơn giản, không cần phụ thuộc bên ngoài	Options biểu tượng hạn chế
Font Awesome	Đa dạng biểu tượng, dễ sử dụng	Cần tệp CSS bên ngoài
Hình ảnh nền	Tùy chỉnh hoàn toàn	Cần kỹ năng tạo/sửa hình ảnh
Bootstrap Icons	Tích hợp tốt với Bootstrap	Cần khung công tác Bootstrap
Google Icons	Biểu tượng chất lượng cao, dễ sử dụng	Cần kết nối internet cho phông chữ

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của các biểu tượng CSS, từ những đỉnh núi đơn giản của các phần tử giả đến những đồng bằng rộng lớn của các thư viện biểu tượng. Nhớ rằng, việc chọn phương pháp đúng phụ thuộc vào nhu cầu của dự án của bạn, giống như việc chọn công cụ đúng cho một công việc.

Khi chúng ta kết thúc, đây là một chút trí tuệ thiết kế web: biểu tượng giống như gia vị trong nấu ăn. Sử dụng chúng để làm nổi bật thiết kế của bạn, không phải để át đi nó. Một chút ở đây và đó có thể làm trang web của bạn nổi bật, nhưng quá nhiều có thể để lại cảm giác không tốt.

Bây giờ,轮到你了 để đi ra ngoài và rắc một chút phép thuật biểu tượng lên trang web của bạn. Đừng sợ thử nghiệm - đó là cách mà tất cả các nhà thiết kế vĩ đại bắt đầu. Và nhớ rằng, trong thế giới thiết kế web, không có gì gọi là sai lầm, chỉ có những sự cố vui vẻ (như câu nói của Bob Ross).

Chúc các bạn may mắn và mong trang web của bạn luôn thân thiện với người dùng và trực quan!

Credits: Image by storyset