Это библиотека монохромных иконок, доступных в растровых форматах, векторных форматах и в виде шрифтов. Он обеспечивает более 250 символов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти глифы не являются бесплатными, однако, если вам не нужно ничего тратить, если вы используете их в проектах на основе Bootstrap.
Загрузка шрифта (библиотека)
Чтобы загрузить библиотеку Bootstrap Glyphicons, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.
<head> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head>
Использование иконки
Bootstrap Glyphicons предоставляет несколько иконок. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали иконку дерева, а имя класса — дерево-лиственное .
<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>
Это даст следующий результат —
Определение размера
Вы можете увеличить или уменьшить размер значка, определив его размер в CSS и используя его вместе с именем класса, как показано ниже. В следующем примере мы определили размер как 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>
Он выдаст следующий вывод:
Определение цвета
Вы можете определить цвет значка, используя CSS. В следующем примере показано, как изменить цвет значка дерева.
<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>
Это даст следующий результат —