在本教程中，您將學習如何使用 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 中使用圖標的通用語法：
<i></i>其中 "icon_class_name" 是在 bootstrap.css 中定義的圖標 class 的名稱（例如：icon-music、icon-star、icon-user 等）。
如果您想要使用白色圖標，然後添加一個額外的 icon-white class，如下所示：
<i></i> </i>如果您想要在使用圖標時帶上一些字符串，記得在 之後添加一些空格。在按鈕中使用圖標或者一些導航連結中可能會出現這種情況。
實例：一個搜索表單實例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用Bootstrap 版本2.0 中搜索圖標的實例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of using icons in search form - Bootstrap version 2.0 from w3cschool.cn">
<meta name="author" content="">
<!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
form {
margin-top: 50px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div>
<div>
<div>
<form>
<input type="text">
<button type="submit"><i></i> 搜索</button>
</form>
</div>
</div>
<footer>
<p>Copyright © 2016 w3cschool.cn</p>
</footer>
</div>
</body>
</html>