Chủ đề tiếp theo của chuyến hành trình tìm hiểu về CSS cơ bản, bài viết này CNET sẽ đưa bạn tìm hiểu về CSS Icons - biểu tượng trong CSS, từ định nghĩa cơ bản đến cách nhúng biểu tượng vào trang web và lược sơ qua về các bộ thư viện Icons thông dụng được sử dụng. Cùng nhau khám phá cách sử dụng và tối ưu hóa biểu tượng để tạo ra giao diện web đẹp mắt và chuyên nghiệp.
- Icons trong CSS là gì?
- Cách nhúng Icons trong HTML.
- Các Icons thông dụng phổ biến.
1.Icons trong CSS là gì?
Trong CSS, Icons là các biểu tượng hoặc hình ảnh nhỏ thường được sử dụng để thể hiện một ý nghĩa cụ thể hoặc hành động trên trang web. Các biểu tượng có thể được sử dụng để làm đẹp và làm cho giao diện người dùng trở nên thân thiện hơn, cũng như để cung cấp thông tin trực quan và nhanh chóng.
Lợi ích của Icon CSS:
Hiệu suất: Icon CSS có thể giúp tối ưu hóa hiệu suất trang web bằng cách giảm số lượng request và kích thước tệp tin so với sử dụng hình ảnh riêng lẻ.
Tùy chỉnh: Các biểu tượng có thể dễ dàng tùy chỉnh qua CSS, cho phép bạn điều chỉnh kích thước, màu sắc, và các thuộc tính khác theo ý muốn.
Thay đổi dễ dàng: Nếu bạn muốn thay đổi một biểu tượng, bạn chỉ cần thay đổi mã nguồn hoặc font chữ, và tất cả các sử dụng sẽ cập nhật tự động.
2. Cách nhúng Icons trong HTML.
- Cách đầu tiên là cách đơn giản nhất để thêm biểu tượng vào trang HTML là sử dụng thư viện biểu tượng, chẳng hạn như Font Awesome.
- Thêm tên của lớp(class) biểu tượng được chỉ định vào bất kỳ phần tử nội tuyến nào trong HTML (như <i>hoặc <span>).
- Tất cả các biểu tượng trong thư viện biểu tượng bên dưới đều là các vectơ có thể mở rộng và có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v.
3.Các Icons thông dụng phổ biến.
Font Awesome Icons
Một trong bộ thư viện thông dụng đầu tiên là Font Awesome Icons, để sử dụng các biểu tượng Font Awesome cần các bước sau:
Bước 1: truy cập fontawgie.com
Bước 2:đăng nhập và nhận mã để thêm vào phần <head> trong trang HTML :
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Bước 3: Sau khi nhúng Font Awesome, bạn có thể sử dụng các class của nó để thêm các biểu tượng vào trang web. Dưới đây là một ví dụ:
Đặc biệt khi sử dụng Font Awesome Icons điểm mạnh là không cần tải xuống hoặc cài đặt, với Font Awesome, bạn có thể sử dụng rất nhiều biểu tượng khác nhau bằng cách thay đổi giá trị của class và mã Unicode tương ứng.
Bootstrap Icons
Tương tự như bộ thư viện Font Awesome không cần tải xuống hoặc cài đặt, sử dụng Bootstrap Icons thực hiện theo các bước sau:
Bước 1: thêm dòng sau vào bên trong phần <head> của trang HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Bước 2 : Khi đã nhúng Bootstrap Icons, bạn có thể sử dụng các class của nó để thêm các biểu tượng vào trang web. Ví dụ minh họa như sau:
Nhúng Bootstrap Icons, bạn có thể tận dụng một loạt các biểu tượng có sẵn mà Bootstrap cung cấp. Ngoài ra muốn biết thêm thông tin và tìm kiếm các biểu tượng hãy truy cập vào trang chính: Bootstrap Icons.
Google Icons
Bộ thư viện Icons thông dụng thứ 3 mà CNET nêu trong bài viết này là Google Icons- sử dụng một loạt các biểu tượng có sẵn mà Google cung cấp với trang chính Material Icons.
Bước 1: thêm dòng dưới để nhúng Google Icons vào bên trong phần <head> trong trang HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Bước 2: Thêm các biểu tượng vào trang web bằng cách sử dụng các class của nó
Trong đó:
Kích thước và màu Sắc: Có thể tùy chỉnh kích thước và màu sắc theo ý muốn.
Danh sách biểu tượng: Tìm kiếm và chọn biểu tượng từ Danh sách biểu tượng của Google.
Thế giới phát triển Web rất phong phú đa dạng nhưng cũng đầy khó khăn và phức tạp, đi sâu vào tìm hiểu từng thành phần là kiến thức vô cùng quan trọng giúp các lập trình viên phát triển bản thân. Vừa rồi chúng ta đã khái quát sơ qua về thành phần không thể bỏ qua trong phát triển trang Web cơ bản - CSS Icons, nó không chỉ là những điểm nhấn trang trí mà còn là công cụ quan trọng giúp tối ưu hóa trải nghiệm người dùng. Bằng cách nhúng và tùy chỉnh các biểu tượng, chúng ta có thể biến ý tưởng thành hiện thực, tạo nên giao diện web thú vị và chuyên nghiệp. Cùng đồng hành với CNET để tìm hiểu về các thành phần trong CSS tiếp theo ở bài sau nhé.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
