Глификоны начальной загрузки
Это библиотека монохроматических значков, доступных в форматах растровых изображений, форматах векторных изображений и в виде шрифтов. Он предоставляет более 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>. В следующем примере мы использовали значок дерева и его имя класса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>Он выдаст следующий результат -
Определение размера
Вы можете увеличить или уменьшить размер значка, определив его размер в CSS и используя его вместе с именем класса, как показано ниже. В следующем примере мы определили размер как 6 см.
<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>Он выдаст следующий результат -