Buzz
Dưới đây là hướng dẫn chi tiết về cách sử dụng biểu tượng trong Bootstrap. Đừng quên tham gia bài học Bootstrap của Mytour để hiểu rõ hơn.
Khám phá ngay về biểu tượng trong Bootstrap
1. Sử dụng Biểu tượng trong Bootstrap
So với Bootstrap 3 với Glyphicon (các biểu tượng font) dưới dạng font chữ, phiên bản Bootstrap 4 không tích hợp thư viện biểu tượng mặc định.
Tuy nhiên, để thêm biểu tượng vào dự án, chúng ta có thể sử dụng thư viện biểu tượng từ font chữ bên ngoài. Font Awesome, thư viện phổ biến và tương thích nhất với Bootstrap, cung cấp 675 biểu tượng khác nhau dưới dạng font chữ.
Ưu điểm khi sử dụng font icon là khả năng tạo biểu tượng với bất kỳ màu sắc nào thông qua thuộc tính color trong CSS.
2. Integrate Font Awesome trong Bootstrap
Chỉ cần sử dụng liên kết CDN font-awesome để thêm biểu tượng font-awesome vào dự án. Liên kết CDN cơ bản chỉ cần trỏ đến file CSS từ xa chứa các lớp cần thiết để tạo ra các biểu tượng độc đáo.
Ví dụ: Dưới đây là ví dụ minh họa cách thêm font awesome vào dự án:
Kết quả cuối cùng sẽ trông như sau:
3. Sử dụng Biểu tượng Font Awesome trong mã nguồn
Để tích hợp biểu tượng font-awesome vào mã nguồn, chúng ta chỉ cần thêm thẻ i với lớp .fa và lớp của biểu tượng cụ thể .fa-*. Cú pháp chung để sử dụng biểu tượng font-awesome như sau:
Trong cú pháp trên, fa-class-name là tên lớp của biểu tượng cụ thể (như fa-search, fa-user, fa-star, fa-calendar, fa-globe, ...) được xác định trong file font-awesome.min.css.
Ví dụ: Để thêm và sử dụng biểu tượng tìm kiếm (search), bạn chỉ cần đặt đoạn mã dưới đây vào bất kỳ đâu trong mã nguồn của bạn:
Kết quả xuất hiện như sau:
Tương tự, chúng ta có thể đặt biểu tượng trong các tiêu đề, đoạn văn, bảng hoặc bất cứ đâu bạn muốn.
Lưu ý: Để đảm bảo khoảng cách phù hợp giữa biểu tượng và văn bản, chúng ta thêm khoảng trắng sau thẻ đóng của biểu tượng (nghĩa là sau thẻ i) khi sử dụng biểu tượng cùng với văn bản như nút bên trong hoặc liên kết điều hướng.
Bài học này của Mytour vừa giới thiệu về biểu tượng trong Bootstrap. Bài học tiếp theo sẽ giới thiệu chi tiết về Tab và Pill trong Bootstrap.
Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc hãy chia sẻ ý kiến của mình trong phần bình luận dưới bài viết. Chúng tôi sẽ giải đáp ngay lập tức!
