Bootstrap图标

时间: 2019-08-08阅读: 2869标签: 图标

小图标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>


 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/5191

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

阿里巴巴iconfont svg图标不能更改颜色的解决方法

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

使用 node.js 从 iconfont.svg 文件中恢复单图标文件

阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能。但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

在Vue.JS中使用图标组件

本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读。此文不包含字体图标和SVG sprite。仅在此讨论允许用户按需导入的图标系统

ReactNative中如何使用自定义的Iconfont图标

在App包的构成中图片资源是比较占大小的,所以我们可以利用Iconfont来替代原来的png或者jpg单色图标,iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!