Nếu bạn đã quen với thư viện icon Glyphicons từ Bootstrap 3 thì tin khá buồn là Bootstrap 4 không hỗ trợ thư viện Glyphicons này. Thế nhưng bạn cũng không cần phải lo lắng quá vì có rất nhiều thư viện icon miễn phí để bạn lựa chọn. Ví dụ như Awesome và Google Material Design Icons.
Để sử dụng các biểu tượng Font Awesome trong Bootstrap 4, hãy thêm phần sau vào trang HTML của bạn (Không cần tải xuống hoặc cài đặt):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Sau đó, thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nội tuyến nào (như <i> hoặc <span>):
Ví dụ sử dụng Font Awesome chèn Icon trong Bootstrap 4
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"></head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <body> <div class="container"> <h1>Trái tim <span style="color:magenta"><i class="fas fa-heart"></i></span></h1> <p>Icon Yêu thích: <span style="color:blue"><i class="fas fa-thumbs-up"></i></span></p> </div> <div class="container"> <p>Icon khác:</p> <span style="color:red"> <i class="fas fa-cloud"></i> <i class="fas fa-coffee"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </span> </div> </body> </html>
Kết quả như sau:
Lời kết:
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.
