Bootstrap Glyphicons
发布于 2016-11-25 14:35:28 | 92 次阅读 | 评论: 0 | 来源: 网络整理
目标
字体图标由于它的一些好处变得越来越流行了。在本教程中我们将讨论如何通过 Bootstrap 3 来使用和定制 Glyphicons。我们将解释在后台工作的 CSS 规则，这将让您更好的了解图标字体的工作原理。这样，您就能熟悉除了 Glyphicons 之外的任何图标字体设置。
什么是 Glyphicons
Glyphicons 是在 Web 项目中使用的图标字体。虽然，使用 Glyphicons 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。为了表示对图标作者的感谢，希望您在使用时加上 Glyphicon 网站 的链接。
获取 Glyphicons
如果您已经从 https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip 下载 Bootstrap 3（或者任何版本 3 之前的版本），您可以找到 dist 文件夹内的 fonts 文件夹内的 glyphicons。这里有四个文件 - glyphicons-halflings-regular.eot、glyphicons-halflings-regular.svg、glyphicons-halflings-regular.ttf 和 glyphicons-halflings-regular.woff。相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。
如何使用 Glyphicons
一般来说，我们可以得出通过 Bootstrap 3 使用 Glyphicons 的常见语法如下
<span class="glyphicon glyphicon-*"></span>
* 可以是任意代表特定图标的关键词。下面的实例演示了如何通过按钮使用它。
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
带有导航栏的 Glyphicon
<!DOCTYPE html>
<html>
<head>
<title>Using Glyphicons with Navbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
CSS 规则解释
下面的 CSS 规则构成 glyphicon class
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。
.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
然后，这里的
.glyphicon:empty {
width: 1em;
}
是空的 glyphicon。
这里有 200 个 class，每个 class 针对一个图标。这些 class 的常见格式如下
.glyphicon-keyword:before {
content: "hexvalue";
}
比如，在我们实例中使用的 user 图标，它的 class 如下
.glyphicon-user:before {
content: "e008";
}
我们已经看到如何使用它，接下来我们看看如何定制 Glyphicons。
我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。
下面是开始的代码
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
效果如下所示
定制字体尺寸
通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon-user"></span> User
</button>
定制字体颜色
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> User
</button>
应用文本阴影
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> User
</button>
