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
字符。为了避免屏幕识读设备抓取非故意的同可能产生模糊的输出内容(尤其是当图标纯粹作为装饰用时),为这些图标设置了 aria-hidden="true" 属性。

  如果应用图标是以表达某些意义(不仅仅是为装修用),请确保所而发挥的意思能够透过吃拉设施识别,例如,包含额外的情连经 .sr-only 类让那个在视觉上展现有藏的功用。

  如果所开创的零部件不含其他公文内容(例如, <button> 内只包含了一个图标),应当提供其他的内容来表示这控件的来意,这样就会被用辅助设备的用户知道该作用了。这种景象下,可以吗控件添加 aria-label 属性

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

  Error:
  Enter a valid email address
</div>

 

相关文章