Với css cơ bản để sử dụng các icon trong trang web chúng ta thường chèn hình ảnh và mất rất nhiều thời gian để style theo ý muốn nhưng với Bootstrap 3 điều này hoàn toàn không cần. Bootstrap 3 cung cấp cho chúng ta Glyphicon một thư viện icon về dạng font-icons cho lập trình viên thỏa thức chèn vào website và trang trí theo ý muốn. Trong bài này chúng ta sẽ học về cách sử dụng Glyphicon trong Bootstrap 3 các bợn nhé!
Glyphicons là gì?
Glyphicon trong bootstrap 3 là những biểu tượng mà người dùng có thể chèn vào website. Glyphicon thuộc về dạng font-icons cho nên chúng ta có thể thay đổi màu sắc và kích thước của chúng một cách dễ dàng.
Bootstrap cung cấp 260 glyphicons từ bộ Glyphicons Halflings.
Glyphicons có thể được sử dụng trong văn bản, nút, thanh công cụ, điều hướng, biểu mẫu, v.v.
Cú pháp Glyphicon
Một glyphicon được chèn vào trang web theo cú pháp sau:
<span class="glyphicon glyphicon-name"></span>
Trong đó glyphicon-name phải được thay bằng tên glyphicon phù hợp.
Các ví dụ về Glyphicon
<!DOCTYPE html> <html lang="en"> <head> <title>Ví dụ Glyphicon trong Bootstrap 3</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Glyphicon trong Bootstrap 3</h2> <p>Biểu tượng thư: <span class="glyphicon glyphicon-envelope"></span></p> <p>Biểu tượng thư dạng liên kết: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p> <p>Biểu tượng tìm kiếm: <span class="glyphicon glyphicon-search"></span></p> <p>Biểu tượng tìm kiếm ở một nút nhấn: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Biểu tượng tìm kiếm ở một nút nhấn có phong cahs: <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Biểu tượng in ấn: <span class="glyphicon glyphicon-print"></span></p> <p>Biểu tượng in ấn ở nút nhất có phong cách: <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p> </div> </body> </html>
Lời kết:
Phải nói glyphicon là một thư viện rất hay trong Bootrstrap 3, với glyphicon chúng ta có thể tiết kiệm rất nhiều thời gian đồng thời việc các biểu tượng có phong cách xuất hiện trong trang web cũng làm tăng độ sinh động của web của chúng ta. Danh sách đầy đủ các glyphicon các bạn có thể tham khảo ở trang web http://glyphicons.com/. Chúc các bạn học tốt!
