Bootstrap의 아이콘에 대해 자세히 알아보기

青灯夜游
풀어 주다: 2021-03-16 18:33:41
앞으로
2461명이 탐색했습니다.

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');
}
로그인 후 복사

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

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

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
로그인 후 복사

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

Bootstrap의 아이콘에 대해 자세히 알아보기

<button>
  <span></span> Star
</button>
로그인 후 복사

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>
로그인 후 복사

Bootstrap의 아이콘에 대해 자세히 알아보기

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

위 내용은 Bootstrap의 아이콘에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿