Bootstrap Icon

Trong hướng dẫn này, bạn sẽ học cách thêm và sử dụng các icon của Bootstrap trên một trang web.

Sử dụng icon trong Bootstrap 5

Bootstrap hiện bao gồm hơn 1.600 icon chất lượng cao, có sẵn ở định dạng SVG, SVG sprite hoặc web font. Bạn có thể sử dụng chúng có hoặc không có Bootstrap trong bất kỳ dự án nào.

Lợi thế của việc sử dụng các icon font là, bạn có thể tạo các icon với bất kỳ màu nào chỉ bằng cách áp dụng thuộc tính CSS color. Ngoài ra, để thay đổi kích thước của các icon, bạn có thể chỉ cần sử dụng thuộc tính CSS font-size.

Bây giờ, chúng ta hãy xem cách thêm và sử dụng các biểu tượng Bootstrap trên một trang web.

Thêm các icon Bootstrap vào một trang web

Cách đơn giản nhất để đưa các icon Bootstrap vào một trang web là sử dụng liên kết CDN. Liên kết CDN này về cơ bản trỏ đến một tệp CSS từ xa bao gồm tất cả các lớp cần thiết để tạo icon font.

Bạn có thể thêm các icon Bootstrap trong mẫu Bootstrap cũng như trong một trang web đơn giản mà không cần sử dụng Bootstrap framework. Hãy xem ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Bootstrap Icons in HTML</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
    <h1><i class="bi-globe"></i> Hello, world!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Cách sử dụng các icon Bootstrap trong code của bạn

Để sử dụng các icon Bootstrap trong code của bạn, bạn sẽ yêu cầu một thẻ <i> có áp dụng một lớp icon .bi-* riêng lẻ trên đó. Cú pháp chung để sử dụng các icon Bootstrap là:

<i class="bi-class-name"></i>

Trong đó class-name là tên của lớp icon cụ thể, ví dụ: search, person, calendar, star, globe, facebook, twitter, v.v. Xem danh sách tất cả các lớp icon Bootstrap.

Ví dụ: để đặt biểu tượng tìm kiếm bên trong một button, bạn có thể làm như sau:

<button type="submit" class="btn btn-primary"><span class="bi-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="bi-search"></span> Search</button>

Kết quả của ví dụ trên sẽ giống như sau:

Cách sử dụng các icon Bootstrap trong code của bạn

Tương tự, bạn có thể đặt các icon bên trong thanh điều hướng, form, table, đoạn văn hoặc bất cứ nơi nào bạn muốn. Trong chương tiếp theo, bạn sẽ thấy cách sử dụng các iconnày trong thành phần điều hướng của Bootstrap.

Lưu ý: Hãy nhớ để lại một khoảng trống sau thẻ đóng của phần tử icon (tức là sau thẻ </i>), khi sử dụng các icon cùng với các chuỗi văn bản, chẳng hạn như các button bên trong hoặc liên kết điều hướng, để đảm bảo rằng có khoảng cách thích hợp giữa icon và văn bản .

Sử dụng các icon Font Awesome trong Bootstrap

Bạn cũng có thể sử dụng các thư viện icon bên ngoài trong Bootstrap. Một trong những thư viện icon bên ngoài phổ biến nhất và tương thích cao với Bootstrap là Font Awesome. Nó cung cấp hơn 2.000 icon có sẵn ở SVG, PNG, cũng như ở định dạng web font để có khả năng sử dụng và khả năng mở rộng tốt hơn.

Bạn chỉ cần sử dụng liên kết CDN Font Awesome có sẵn miễn phí để đưa nó vào dự án của mình. Hãy xem ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Including Font Awesome Icons in Bootstrap</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <h1><i class="fa fa-globe"></i> Hello, world!</h1>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Cách sử dụng Icon của Font Awesome trong code của bạn

Để sử dụng các icon của Font Awesome trong code của mình, bạn sẽ yêu cầu một thẻ <i> cùng với một lớp cơ sở .fa và một lớp icon riêng lẻ .fa-*. Cú pháp chung để sử dụng các icon của Font Awesome là:

<i class="fa fa-class-name"></i>

Trong đó class-name là tên của lớp icon cụ thể, ví dụ: search, user, calendar, star, globe, facebook, twitter, v.v. Xem danh sách tất cả các lớp icon của Font Awesome.

Ví dụ: bạn có thể đặt icon tìm kiếm của Font Awesome bên trong một button như sau:

<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>

Kết quả của ví dụ trên sẽ giống như sau:

Cách sử dụng Icon của Font Awesome trong code của bạn

Tương tự, bạn có thể đặt các icon của Font Awesome bên trong nav, form, table, đoạn văn và các thành phần khác theo cách giống như cách bạn làm với các icon Bootstrap.

BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.