Bootstrap Glyphicons
Đây là một thư viện các biểu tượng đơn sắc có sẵn ở định dạng ảnh raster, định dạng ảnh vectơ và dưới dạng phông chữ. Nó cung cấp hơn 250 glyph ở định dạng phông chữ. Bạn có thể sử dụng các phông chữ này trong các dự án web của mình. Những glyph này không miễn phí, tuy nhiên, nếu bạn không phải chi bất kỳ chi phí nào trong trường hợp bạn đang sử dụng chúng trong các dự án dựa trên Bootstrap.
Đang tải Phông chữ (thư viện)
Để tải thư viện Bootstrap Glyphicons, hãy sao chép và dán dòng sau vào phần <head> của trang web.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>Sử dụng biểu tượng
Bootstrap Glyphicons cung cấp một số biểu tượng. Chọn một trong số chúng và thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nào trong thẻ <body>. Trong ví dụ sau, chúng tôi đã sử dụng biểu tượng của cái cây và tên lớp của nó làtree-deciduous.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Xác định kích thước
Bạn có thể tăng hoặc giảm kích thước của một biểu tượng bằng cách xác định kích thước của nó trong CSS và sử dụng nó cùng với tên lớp như hình dưới đây. Trong ví dụ sau, chúng tôi đã xác định kích thước là 6 em.
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Xác định màu sắc
Bạn có thể xác định màu của một biểu tượng bằng cách sử dụng CSS. Ví dụ minh họa sau đây cho thấy cách thay đổi màu của biểu tượng cây.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Nó sẽ tạo ra kết quả sau: