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>

  [注意]贪图标类最好应用在非含其他文件内容或子元素的要素上。图标类不克跟另外组件直接联合以。它们不能够在同一个要素上同任何类似共存在。应该创建一个嵌套的 标签,并将图标类应用到这个 标签上

 

只是访问性

  现代之扶植技术能分辨并朗读由 CSS 生成的情节以及一定的 Unicode
字符。为了避免屏幕识读设备抓取非故意的和可能产生模糊的输出内容(尤其是当图标Bootstrap纯粹作为装修用时),为这些图标设置了 aria-hidden="true" 属性。

  如果采取图标是为发挥某些意义(不仅仅是为装饰用),请确保所而发挥的意思能够透过叫帮忙装置识别,例如,包含额外的始末并经 .sr-only 类让那个于视觉及见出藏的功效。

  如果所创办的零件不含有其他文件内容(例如, <button> 内只含了一个图标),应当提供任何的始末来表示这个控件的图,这样即便能为用辅助设备的用户知道该意图了。这种情景下,可以吗控件添加 aria-label 属性

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

  Error:
  Enter a valid email address
</div>

 

相关文章