Bootstrap3的Glyphicons字体图标的使用方法

最新推荐文章于 2024-06-03 20:31:46 发布

NGDEMO

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量1.4k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap 3 Glyphicons字体图标使用方法

本文链接：https://blog.csdn.net/qq_37667131/article/details/82719527

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用前先介绍一些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官网”。

NGDEMO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap3的Glyphicons字体图标的使用方法

使用前先介绍一些Bootstrap中文网的坑：（1）Bootstrap3提供了很多免费的可用字体图标，为了阅读方便，国内的大多数Bootstrap初学者都会选择去Bootstrap中文网学习，但Bootstrap中文网上下载的Bootstrap 3 的环境文件到本地使用，按照Bootstrap中文网给出的字体图标实例来使用却显示不了字体图标。如下所示：&lt;!DOCTYPE html&...
复制链接

扫一扫