Bootstrap3的Glyphicons字体图标的使用方法
使用前先介绍一些Bootstrap中文网的坑：
（1）Bootstrap3提供了很多免费的可用字体图标，为了阅读方便，国内的大多数Bootstrap初学者都会选择去Bootstrap中文网学习，但Bootstrap中文网上下载的Bootstrap 3 的环境文件到本地使用，按照Bootstrap中文网给出的字体图标实例来使用却显示不了字体图标。如下所示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
</body>
</html>上面的代码已经引用了下载到本地的Bootstrap 3 环境文件，运行在浏览器却显示不出字体图标：
（2）引用Bootstrap中文网Bootstrap 3的CDN是可以显示图标的（之前也是显示不了图标，最近可以了）。如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
</body>
</html>代码是一样的，只是将本地引入换成了CDN引入，字体图标可以显示出来：
使用CDN引入需要注意的是，只有计算机在联网正常的情况下才有效 。
Bootstrap的使用通常会搭配JQuery，不同的jQuery版本和不同的Bootstrap版本应该存在兼容性问题（本人也不清楚，纯属猜测，因为在多次使用过程得出的教训，会有报错的现象）。为了解决这个问题，本人经常使用的一套比较稳定的jQuery和Bootstrap搭配的CDN版本。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
</body>
</html>上面代码显示的效果是这样的：
总结：
虽然Bootstrap中文网的Bootstrap CDN可以显示字体图标，但是显示效果还是与其给出的实例不太相同。
使用Bootstrap官网的CDN显示的效果是：
使用本人给出的CDN版本显示的效果是：
仔细观察，就可以发现上述两种CDN引入显示的效果有所不同。不同有两点：
（1）Bootstrap中文网给出的CDN，显示颜色更为深色一点；
（2）Bootstrap中文网给出的CDN，把代码中span标签里的Error:显示出来，而后者没有显示。
这里觉得奇怪的是，Bootstrap中文网给出实例的展示效果却是后者，这让初学者很是疑惑。
Bootstrap中文网字体图标实例给出的显示效果如下：
各位读者可以到Bootstrap中文网亲自去了解一下。也可以到Bootstrap官网了解一下，对比一下中文网和官网。若想了解小编的亲自了解，请关照小编后续的文章。
友情链接：
（1）Bootstrap中文网（http://www.bootcss.com/），或直接百度“Bootstrap中文网”。
（2）Bootstrap官网（https://getbootstrap.com/），网站为英文内容。百度“Bootstrap官网”。