Hướng dẫn dùng các icon trong bootstrap

Cách đơn giản nhất để thêm biểu tượng vào trang HTML của bạn là sử dụng thư viện biểu tượng (icon), chẳng hạn như Font Awesome.

Nội dung chính Show

Thư viện Font Awesome
Tìm hiểu về biểu tượng trong Bootstrap
Tất cả bài viết | Bootstrap
Trong bài thực hành này các Bạn sẽ được hướng dẫn tạo icon tròn bằng Bootstrap
Hướng dẫn tạo icon tròn bằng Bootstrap

Thêm tên của biểu tượng mong muốn vào phần tử HTML nội dòng (inline HTML). Như <i> hoặc <span>.

Tất cả các biểu tượng trong các thư viện biểu tượng này có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, độ bóng, v.v.)

Thư viện Font Awesome

Để sử dụng các biểu tượng của thư viện Font Awesome, hãy truy cập fontawesome.com , đăng nhập và nhận mã để thêm vào phần`<head>` của trang html của bạn.

Vậy là Bootstrap 4 không hỗ trợ thư viện icon riêng mà chúng ta phải sử dụng các thư viện online bên ngoài. Có thể đây là bước cải lùi của Bootstap thế nhưng không sao cả thay vì nghiên cứu cách sử dụng bộ icon sẵn có chúng ta cần bỏ 1 chút thời gian nghiên cứu bộ icon online là được rồi.

Tham khảo tiếp bài học dưới đây của Taimienphi.vn để tìm hiểu chi tiết về 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 về 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 font icon) trong định dạng font 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 font 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 font chữ.

Lợi thế của việc sử dụng các font icon 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 thuộc tính color trong CSS.

2. Thêm Font Awesome trong Bootstrap

Chúng ta chỉ cần sử dụng link 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 link CDN trỏ đến file 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 font awesome 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 Font Awesome trong mã

Để sử dụng các biểu tượng font-awesome trong mã, chúng ta sẽ cần một thẻ i cùng lớp .fa và lớp biểu tượng .fa-*. Cú pháp chung để sử dụng các biểu tượng font-awesome có 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 file font-awesome.min.css.

Ví dụ: Để thêm và sử dụng biểu tượng tìm kiếm (search), chúng ta có thể đặt đoạn mã dưới đây 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 các 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 phần tử icon (tức là sau thẻ i) khi sử dụng các biểu tượng cùng với chuỗi văn bản chẳng hạn như các nút bên trong hoặc link điều hướng, để đảm bảo khoảng cách phù hợp giữa biểu tượng và bản văn.

Bài học trên đây Taimienphi.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.