Erfahren Sie mehr über Symbole in Bootstrap

青灯夜游
Freigeben: 2021-03-16 18:33:41
nach vorne
2458 Leute haben es durchsucht

Erfahren Sie mehr über Symbole in Bootstrap

相关推荐:《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');
}
Nach dem Login kopieren

  自定义完字体之后,需要对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";
}
Nach dem Login kopieren

使用

  所有icon都是以”glyphicon-”前缀的类名开始,然后后缀表示图标的名称,详细情况移步至此,所有图标都需要一个基类和对应每个图标的类

  在网页中使用图标非常的简单,在任何内联元素上应用所对应的样式即可

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
Nach dem Login kopieren

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

Erfahren Sie mehr über Symbole in Bootstrap

<button>
  <span></span> Star
</button>
Nach dem Login kopieren

Erfahren Sie mehr über Symbole in Bootstrap

  [注意]图标类最好应用在不包含任何文本内容或子元素的元素上。图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span></span> 标签,并将图标类应用到这个 <span></span> 标签上

可访问性

  现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),为这些图标设置了 aria-hidden="true" 属性。

  如果使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。

  如果所创建的组件不包含任何文本内容(例如, <button></button> 内只包含了一个图标),应当提供其他的内容来表示这个控件的意图,这样就能让使用辅助设备的用户知道其作用了。这种情况下,可以为控件添加 aria-label 属性

<div>
  <span></span>
  <span>Error:</span>
  Enter a valid email address
</div>
Nach dem Login kopieren

Erfahren Sie mehr über Symbole in Bootstrap

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Symbole in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage