Bootstrap字体图标样式讲解
1、以案例来讲解Bootstrap字体图标的使用和修改样式，打开WebStorm开发工具，新建‘test.html’文件，并在同级目录，部署Bootstrap相关文件，结构如下图，注意fonts文件夹就是存放的就是字体
2、在‘test.html’中写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container" >
<button class="btn-primary">
<span class="glyphicon glyphicon-search"></span>
搜索
</button>
</div>
</body>
</html>
字体图标必须使用span标签
3、查看网页效果如下图
4、修改字体图标颜色等，可以直接在为这个span标签添加样式，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container" >
<button class="btn-primary">
<span class="glyphicon glyphicon-search" style="color: red;font-size: large"></span>
搜索
</button>
</div>
</body>
</html>
5、查看效果如下图
6、下面做个表单内搜索输入框的实例，修改‘test.html’代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container" >
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary">
<span class="glyphicon glyphicon-search">
</span>
搜索
</button>
</span>
</div>
</div>
</form>
</div>
</body>
</html>
7、查看网页效果如下图，一个实用带字体图标的搜索输入框就做好了
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：76
阅读量：101
阅读量：180
阅读量：82
阅读量：151