Glify Bootstrap
Jest to biblioteka ikon monochromatycznych dostępnych w formatach obrazów rastrowych, formatach obrazów wektorowych oraz jako czcionki. Zawiera ponad 250 glifów w formacie czcionki. Możesz używać tych czcionek w swoich projektach internetowych. Te glify nie są darmowe, ale jeśli nie musisz nic wydawać, jeśli używasz ich w projektach opartych na Bootstrap.
Ładowanie czcionki (biblioteka)
Aby załadować bibliotekę Bootstrap Glyphicons, skopiuj i wklej następujący wiersz w sekcji <head> strony internetowej.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>Korzystanie z Icon
Glyphicons Bootstrap zawiera wiele ikon. Wybierz jedną z nich i dodaj nazwę klasy icon do dowolnego elementu HTML w tagu <body>. W poniższym przykładzie użyliśmy ikony drzewa, a nazwa jego klasy totree-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>Wytworzy następujący wynik -
Definiowanie rozmiaru
Możesz zwiększyć lub zmniejszyć rozmiar ikony, definiując jej rozmiar w CSS i używając go razem z nazwą klasy, jak pokazano poniżej. W poniższym przykładzie zdefiniowaliśmy rozmiar jako 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>Wygeneruje następujący wynik:
Definiowanie koloru
Możesz zdefiniować kolor ikony za pomocą CSS. Poniższy przykład pokazuje, jak zmienić kolor ikony drzewa.
<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>Wytworzy następujący wynik -