互联网常识：深入学习Bootstrap中的图标

跟大家讲解下有关深入学习Bootstrap中的图标，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说深入学习Bootstrap中的图标，小编也收集到了有关深入学习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 class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-ok"></span> <span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span> <span class="glyphicon glyphicon-heart"></span>

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

<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>

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

可访问性

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

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

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

<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>

更多编程相关知识，请访问：编程视频！！

以上就是深入学习Bootstrap中的图标的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！