BootstrapBootstrap图标

前面包车型客车话

  小图标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>

  [注意]图标类最好使用在不含有其余文件内容或子成分的成分上。图标类不可能和此外组件直接联合使用。它们不能够在同二个因素上与其余类一起存在。应该创造2个嵌套的 标签,并将图标类应用到这个 标签上

 

可访问性

  现代的推来推去技术能够辨识并朗读由 CSS 生成的剧情和一定的 Unicode
字符。为了制止显示屏识读设备抓取非故意的和可能产生模糊的出口内容(越发是当图标纯粹作为点缀用途时),为那些图标设置了 aria-hidden="true" 属性。

  假使应用图标是为着表达有个别意义(不仅仅是为了装修用),请确定保证所要表明的意味能够透过被扶持装置识别,例如,包含额外的始末并通过 .sr-only 类让其在视觉上海展览中心现出隐藏的坚守。

  假如所创建的零部件不分包其余文件内容(例如, <button> 内只包涵了二个图标),应当提供任何的剧情来表示那些控件的打算,那样就能让动用协理装置的用户领会其成效了。那种场所下,能够为控件添加 aria-label 属性

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

  Error:
  Enter a valid email address
</div>

 

相关文章