Bootstrap 图标

简介

在本教程中，您将学习如何使用 Bootstrap 2.0 工具包来创建图标。Bootstrap 图标由 Glyphicons 提供。如果您在项目中使用这些图标，请确保提供 Glyphicons 的链接。

作为 CSS Sprite 使用

所有的图标图像都捆绑到一起，并通过 background-position CSS 属性使用。图像文件是 glyphicons-halflings.png，位于 Bootstrap 主文件夹下的 img 文件夹。图标的样式以及背景位置是在 bootstrap.css 的行号 1168 到 1544 中规定。请注意，为避免冲突，所有的图标 class 都以 "icon-" 为前缀。Bootstrap 2.0 中定义了 120 个图标 class。

如何在您自己的站点或 app 中使用图标

下面是在站点或 app 中使用图标的通用语法：

其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称（例如：icon-music、icon-star、icon-user 等）。

如果您想要使用白色图标，然后添加一个额外的 icon-white class，如下所示：

如果您想要在使用图标时带上一些字符串，记得在 之后添加一些空格。在按钮中使用图标或者一些导航链接中可能会出现这种情况。

实例：一个搜索表单

实例

在线查看

在不同的浏览器窗口查看上面实例。

实例：在导航中使用图标

实例