bootstrap中的glyphicon问题

在bootstrap中有自有包含一种字体图标glyphicon，基本能够满足大部分的UI要求。这里简单总结一下其使用方法。

官网给出的使用要求如下：
1. 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 span 标签，并将图标类应用到这个 span标签上。
2. 图标类只能应用在不包含任何文本内容或子元素的元素上。
3. 避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=”true” 属性。
4. …

这里经测试，除span外也可以使用i标签，两者在没有内容时无太多差别：
- span标签被用来组合文档中的行内元素
- i 标签呈现斜体的文本

常用使用：
1. 改变glyphicon的大小，使用font-size属性，最小为12px，再小无变化。
2. 改变glyphicon的颜色，使用color属性。
以下为测试代码：

<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
<i class="glyphicon glyphicon-search" aria hidden="true"></i>
<!--css-->
<style>.glyphicon{font-size:12px;color: red;}.glyphicon2{font-size:6px ;}
</style>

中间有一个小插曲，我在测试时使用BootCDN时，显示不出来，我更换了官网的CDN源后使用正常。
两者对比入下:
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >
3. 重置其glyphicon等样式，类似代码如下。、

/*less 语法*/
.icon-default-styles(@top, @left) {width: 15px;height: 15px;background: url(@common-icons-sprite) @top @left no-repeat;&, &:before, &:after {//关键代码，关闭bootstrap自动加入的iconcontent: none;}
}
.glyphicon-warning-sign {.icon-default-styles(-52px, -132px);
}

bootstrap中的glyphicon问题相关推荐

BootStrap中引用glyphicon图标无法显示的解决方式
1.首先看一下图标显示失败的页面: 2.经过参考大佬们的经验,我找到了解决办法.首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的,没有把所有的css样式表和 ...
CSS中利用BootStrap框架引入glyphicon图标无法显示的解决方法
想要引用如图的对勾图标结果显示出来的是一个方框出现该问题的原因是由于没有注意bootstrap引入css和fonts的规范,就可能会导致bootstrap 在显示glyphicon图标时无法正常显 ...
html+字体图标找不到字体,bootstrap中不显示字体图标问题怎么解决？
bootstrap中不显示字体图标的原因是什么?怎么解决?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 你在使用bootstrap字体图标的时候,是否遇 ...
BootStrap中的日期时间组件datetimepicker
使用BootStrap中的日期时间组件需要引入以下三个文件:  <link rel="stylesheet" th:href="@ ...
bootstrap课程5 bootstrap中的组件使用的注意事项是什么
bootstrap课程5 bootstrap中的组件使用的注意事项是什么一.总结一句话总结: 1.img-responsive的作用是什么(其实还是要多看手册)? 看起来像width=100%的效 ...
bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
html在文本框添加相机图标,[Bootstrap]Bootstrap中如何给文本框添加图标？
问题描述如题,在Bootstrap中,如何为一个文本框添加图标呢?比如有实现一个用户名的文本框,如下图: 方案一参考官方的示例代码(无需写其他的CSS样式): 方案二不使用 Bootstrap实 ...
Bootstrap中文本的样式
在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实 ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

bootstrap中的glyphicon问题

bootstrap中的glyphicon问题相关推荐

最新文章

热门文章