Bootstrap图标

面前的话

  小图标icon是一个上佳Web中不得缺失的一局部,起到必要的效益。在Bootstrap框架中也为我们提供了250六个例外的icon图片。本文将详细介绍Bootstrap图标

 

规律分析

  Bootstrap框架中的图标都是字体图标,其促成原理就是通过@font-face属性加载了字体

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

  自定义完字体之后,需要对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-”前缀的类名初叶,然后后缀表示图标的称谓,详细情状移动至此,所有图标都急需一个基类和对应每个图标的类

  在网页中运用图标非常的简易,在此外内联元素上选取所对应的体裁即可

  为了设置科学的内边距(padding),务必在图标和文书之间添加一个空格

<button type="button" class="btn btn-default btn-lg">
   Star
</button>

  [注意]图标类最好使用在不带有其他公文内容或子元素的元素上。图标类不可以和此外组件直接联合利用。它们不可能在同一个因素上与任何类一起存在。应该创立一个嵌套的 标签,并将图标类应用到这个 标签上

 

可访问性

  现代的扶持技术可以分辨并朗读由 CSS 生成的始末和一定的 Unicode
字符。为了制止屏幕识读设备抓取非故意的和可能暴发模糊的出口内容(尤其是当图标纯粹作为点缀用途时),为这么些图标设置了 aria-hidden="true" 属性。

  假使使用图标是为着发挥某些意义(不仅仅是为了装修用),请保管所要表达的趣味可以因此被协助设备识别,例如,包含额外的情节并透过 .sr-only 类让其在视觉上显示出隐藏的职能。

  假诺所创办的组件不分包其他公文内容(例如, <button> 内只包含了一个图标),应当提供任何的情节来代表这么些控件的打算,这样就能让使用援助设备的用户知道其遵循了。这种气象下,可以为控件添加 aria-label 属性

<div class="alert alert-danger" role="alert">

  Error:
  Enter a valid email address
</div>

 

相关文章