Bootstrap字体图标样式讲解

时间：2024-10-13 15:25:02

1、以案例来讲解Bootstrap字体图标的使用和修改样式，打开WebStorm开发工具，新建‘test.html’文件，并在同级目录，部署Bootstrap相关文件，结构如下图，注意fonts文件夹就是存放的就是字体

2、在‘test.html’中写代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <link href="css/bootstrap.min.css" rel="stylesheet">  </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>  <link href="css/bootstrap.min.css" rel="stylesheet">  </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>  <link href="css/bootstrap.min.css" rel="stylesheet">  </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、查看网页效果如下图，一个实用带字体图标的搜索输入框就做好了