Bootstrap图标
⼩图标icon是⼀个优秀Web中不可缺少的⼀部分，起到画龙点睛的效果。在Bootstrap框架中也为⼤家提供了250多个不同的icon图⽚。本⽂将详细介绍Bootstrap图标
原理分析
Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../');
src: url('../?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../f') format('truetype'), url('../fonts/glyphicons-halflings-regular.s }
⾃定义完字体之后，需要对icon设置⼀个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.
glyphicon-asterisk:before {
content: "\2a";
}
使⽤
所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表⽰图标的名称，所有图标都需要⼀个基类和对应每个图标的类。在⽹页中使⽤图标⾮常的简单，在任何内联元素上应⽤
所对应的样式即可
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
icon图标库
<span class="glyphicon glyphicon-heart"></span>
为了设置正确的内边距（padding），务必在图标和⽂本之间添加⼀个空格
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
[注意]图标类最好应⽤在不包含任何⽂本内容或⼦元素的元素上。图标类不能和其它组件直接联合使⽤。它们不能在同⼀个元素上与其他类共同存在。应该创建⼀个嵌套的
<span> 标签，并将图标类应⽤到这个 <span> 标签上
可访问性
现代的辅助技术能够识别并朗读由 css ⽣成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取⾮故意的和可能产⽣混淆的输出内容（尤其是当图标纯粹作为装饰⽤途
时），为这些图标设置了 aria-hidden="true" 属性。
如果使⽤图标是为了表达某些含义（不仅仅是为了装饰⽤），请确保所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐
藏的效果。
如果所创建的组件不包含任何⽂本内容（例如， <button> 内只包含了⼀个图标），应当提供其他的内容来表⽰这个控件的意图，这样就能让使⽤辅助设备的⽤户知道其作⽤了。
这种情况下，可以为控件添加 aria-label 属性
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。