Biểu tượng bootstrap 5

Tham khảo tiếp bài học dưới đây của Taimienphi. vn để tìm hiểu chi tiết về các biểu tượng trong Bootstrap, ngoài ra bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác đã có trên Taimienphi. vn để tìm hiểu thêm về Media Object trong Bootstrap

Để tìm hiểu cách sử dụng biểu tượng trong Bootstrap như thế nào, bạn đọc cùng tham khảo thêm các bài học Bootstrap dưới đây của Taimienphi. vn

Tìm hiểu về các biểu tượng trong Bootstrap

1. Biểu tượng trong Bootstrap

Khác với Bootstrap 3 bao gồm Glyphicon (các biểu tượng phông chữ) trong định dạng phông chữ chữ, phiên bản Bootstrap 4 không có thư viện biểu tượng theo mặc định

Tuy nhiên, nếu muốn, chúng ta vẫn có thể thêm các biểu tượng trong dự án của mình bằng cách sử dụng thư viện biểu tượng dựa trên phông chữ bên ngoài. Thư viện phổ biến nhất và tương thích với Bootstrap phải kể đến Font Awesome, bao gồm 675 biểu tượng khác nhau có sẵn ở định dạng phông chữ chữ

Lợi thế của việc sử dụng các biểu tượng phông chữ là chúng ta có thể tạo các biểu tượng với các màu sắc bất kỳ bằng cách sử dụng các thuộc tính màu trong CSS

2. Thêm Phông chữ Tuyệt vời trong Bootstrap

Chúng ta chỉ cần sử dụng liên kết CDN font-awesome có sẵn để thêm các biểu tượng font-awesome vào dự án của mình. Về cơ bản liên kết CDN trỏ đến tệp CSS từ xa có chứa các lớp cần thiết để tạo các biểu tượng khác nhau

Ví dụ. ví dụ dưới đây minh họa cách thêm phông chữ tuyệt vời vào dự án

Kết quả đầu ra có dạng như dưới đây

3. Sử dụng các biểu tượng Phông chữ Tuyệt vời trong mã

Để sử dụng các biểu tượng phông chữ tuyệt vời trong mã, chúng ta sẽ cần một thẻ cùng lớp. fa and layer icon. fa-*. Cú pháp chung để sử dụng các biểu tượng phông chữ tuyệt vời có định dạng như dưới đây

Trong cú pháp trên, fa-class-name là tên của lóp biểu tượng cụ thể (chẳng hạn như fa-search, fa-user, fa-star, fa-calendar, fa-globe,. ) được xác định trong tệp font-awesome. tối thiểu. css

Ví dụ. Để bổ sung và sử dụng biểu tượng tìm kiếm (search), chúng ta có thể đặt đoạn mã bên dưới vào vị trí bất kỳ

Kết quả đầu ra có dạng như dưới đây

Tương tự, chúng ta có thể đặt các biểu tượng trong tiêu đề, đoạn văn bản, bảng hoặc vị trí bất kỳ nếu muốn

Lưu ý. Chúng ta sử dụng khoảng trắng sau thẻ đóng biểu tượng phần tử (tức là sau thẻ i) khi sử dụng các biểu tượng tương tự với chuỗi văn bản không giới hạn như các nút bên trong hoặc liên kết điều hướng, để đảm bảo khoảng cách phù hợp giữa

Bài học trên Taimienphi đây. vn vừa giới thiệu cho bạn về biểu tượng trong Bootstrap. Trong bài học tiếp theo Taimienphi. vn sẽ giới thiệu tiếp cho bạn về Tab và Pill trong Bootstrap

Mặc dù Bootstrap không bao gồm bộ biểu tượng theo mặc định, nhưng chúng tôi có thư viện biểu tượng toàn diện của riêng mình được gọi là Biểu tượng Bootstrap. Vui lòng sử dụng chúng hoặc bất kỳ biểu tượng nào khác được đặt trong dự án của bạn. Chúng tôi đã bao gồm thông tin chi tiết về Biểu tượng Bootstrap và các bộ biểu tượng ưa thích khác bên dưới

Mặc dù hầu hết các bộ biểu tượng bao gồm nhiều định dạng tệp, chúng tôi thích triển khai SVG hơn vì khả năng truy cập được cải thiện và hỗ trợ véc-tơ của chúng

Biểu tượng Bootstrap

Biểu tượng Bootstrap là một thư viện các biểu tượng SVG đang phát triển được thiết kế bởi @mdo và được duy trì bởi Nhóm Bootstrap. Sự khởi đầu của bộ biểu tượng này đến từ các thành phần rất riêng của Bootstrap—biểu mẫu, băng chuyền của chúng tôi, v.v. Bootstrap có rất ít nhu cầu về biểu tượng, vì vậy chúng tôi không cần nhiều. Tuy nhiên, một khi chúng tôi bắt đầu, chúng tôi không thể ngừng tạo ra nhiều hơn nữa

Ồ, và chúng tôi đã đề cập đến việc chúng hoàn toàn là mã nguồn mở chưa?

Tìm hiểu thêm về Biểu tượng Bootstrap, bao gồm cách cài đặt chúng và cách sử dụng được đề xuất

lựa chọn thay thế

Chúng tôi đã thử nghiệm và sử dụng các bộ biểu tượng này làm lựa chọn thay thế ưa thích cho Biểu tượng Bootstrap

Lựa chọn khác

Mặc dù chúng tôi chưa tự mình thử những thứ này, nhưng chúng có vẻ đầy hứa hẹn và cung cấp nhiều định dạng, bao gồm cả SVG