bootstrap中的Glyphicon 字体图标应用

最新推荐文章于 2023-07-13 21:47:53 发布

原创最新推荐文章于 2023-07-13 21:47:53 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

7 篇文章

订阅专栏

本文展示了一个使用HTML和Bootstrap创建的基本网页示例，其中包括多种Glyphicons图标。通过引入jQuery和Bootstrap的CSS及JS文件，演示了如何在网页中集成并显示这些图标。

代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Hello</title>

<link href="dist/css/bootstrap.min.css" rel="stylesheet">

<script src="js/jquery-1.11.2.min.js"></script>

<script src="dist/js/bootstrap.min.js"></script>

</head>

<body>

<span class="glyphicon glyphicon-asterisk"></span>

<span class="glyphicon glyphicon-plus"></span>

<span class="glyphicon glyphicon-cloud"></span>

<span class="glyphicon glyphicon-envelope"></span>

<span class="glyphicon glyphicon-heart"></span>

<span class="glyphicon glyphicon-music"></span>



</body>

</html>

效果图