how2j.cn


工具版本兼容问题
Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求

为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失


示例 1 : 一个字体图标   
示例 2 : 字体图标设置颜色   
示例 3 : 字体图标上加超链   
示例 4 : 在button上使用字体图标   
示例 5 : 所有的字体图标   

示例 1 :

一个字体图标

edit
使用class: glyphicon glyphicon-asterisk
<span class="glyphicon glyphicon-asterisk"></span>
运行效果
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <span class="glyphicon glyphicon-asterisk"></span>
1
2
3
4
5
6
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    
<span class="glyphicon glyphicon-asterisk"></span>


示例 2 :

字体图标设置颜色

edit
加一个文本类 text-success
<span class="glyphicon glyphicon-asterisk text-success"></span>
运行效果
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <span class="glyphicon glyphicon-asterisk text-success"></span>
1
2
3
4
5
6
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
     
<span class="glyphicon glyphicon-asterisk text-success"></span>


示例 3 :

字体图标上加超链

edit
在span外面套一个a标签
<a href="#nowhere">
<span class="glyphicon glyphicon-asterisk"></span> 连接
</a>
运行效果
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <a href="#nowhere"> <span class="glyphicon glyphicon-asterisk"></span> 连接 </a>
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
     
<a href="#nowhere">
<span class="glyphicon glyphicon-asterisk"></span> 连接
</a>


示例 4 :

在button上使用字体图标

edit
在span外面套一个button标签

<button class="btn btn-primary btn">
<span class="glyphicon glyphicon-asterisk"></span> 按钮
</button>
运行效果
<!DOCTYPE html> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-asterisk"></span> 最小按钮 </button> <button class="btn btn-primary btn"> <span class="glyphicon glyphicon-asterisk"></span> 按钮 </button>
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
     
<button class="btn btn-primary btn-xs">
  <span class="glyphicon glyphicon-asterisk"></span> 最小按钮
</button>
<button class="btn btn-primary btn">
  <span class="glyphicon glyphicon-asterisk"></span> 按钮
</button>


示例 5 :

所有的字体图标

edit




HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2019-07-27 关于btn
exaid

示例4第10行<button class="btn btn-primary btn">为啥要有这么多btn, 试了下<button class="btn btn-primary ">好像也没区别吧




2 个答案

鸡你太美噢北北
答案时间:2020-09-02
class里面是按最后面添加的class为准,就是如果btn的里面的某个属性被 btn-primary 替代的话,在后面再加上btn就不会被替代了,不过目前看的确是多此一举的写法

kbh13506051596
答案时间:2019-12-16
最后一个加不加都一样,表示默认大小的button。第一个的话我试了一下,去掉之后,边框有点错乱



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢

2019-05-20 在后面实践中踩得坑,特地来这里总结一下,关于加上字体图标后,元素属性变化的理解,
快乐的王8




<div class="glyphicon glyphicon-asterisk">div的属性就由块级元素转变成内联元素,站长,不知道这样理解对不对?


2 个答案

kbh13506051596
答案时间:2019-12-16
可以按F12看样式:确实变成了inline-block

andufala
答案时间:2019-07-12
因为bootstrap中类glyphicon直接将display属性定义成内联了吧



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢


2019-03-19 bootstrap和layui
2018-06-03 这东西好啊!!!
2017-12-02 bootstrap4 的字体图标是什么


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 5 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢