一、Glyphicons 字体图标
1、所有可用的图标查看：http://v3.bootcss.com/components/
2、获取字体图标：我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：
3、在线定制字体图标：http://www.w3cschool.cc/try/demo_source/bootstrap-glyph-customization.htm
4、使用方法：如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。
<span class="glyphicon glyphicon-search"></span>
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 如何使用字形图标（Glyphicons）</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-order"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-order-alt"></span> </button> </p> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-user"></span> User </button> </body> </html>
显示结果如下：
5、带有导航栏的字体图标
<!DOCTYPE html> <html> <head> <title>导航栏的字形图标</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top: 50px; padding-left: 50px; } </style> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.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 (Bootstrap 插件需要引入) --> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- 包含了所有编译插件 --> <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
显示效果如下：
原文：http://www.cnblogs.com/LO-ME/p/4368143.html