bootstrap4.0图标使用_详解Bootstrap glyphicons字体图标
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。
首先给大家介绍什么是字体图标:
字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon class 声明一个从顶部偏移 1px 的相对位置,呈现为 inline-block,声明字体,规定 font-style 和 font-weight 为 normal,设置行高为 1。除此之外,使用-webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。
关于-webkit-font-smoothing和-moz-osx-font-smoothing:
-webkit-font-smoothing属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
auto
inherit ------继承父元素
initial
-moz-osx-font-smoothing属性,其中-osx-表明这是mozilla难得的给特定操作系统推出的特性增强,由于缺乏文档,目前已知的取值是:
grayscale ------抗锯齿很好
auto ------默认值
inherit ------继承
Bootstrap提供了200个字体图标,每个图标对应一个class,在使用时,我们只需要包含glyphicon和对应的class即可。
使用方法:
demo
body{padding: 20px;}
配合button使用:
Home
Home
Home
Home
Home
效果:
定制字体图标
在上一个例中,其实我们已经实现了对字体图标大小和颜色的定制,此处再做进一步说明。
通过改变字体的大小或button的大小,可以改变字体图标的大小。
通过设置color的颜色,可以改变字体图标的颜色,如下:
Home
Home
Home
效果:
可以看出:通过改变其父元素或者是span本身的color,都可以改变字体图标的颜色。
应用文本阴影
Home
Home
Home
更多请查看字体图标,可以bootstrap官方文档:
以上内容给大家介绍了Bootstrap glyphicons字体图标的相关知识,希望大家喜欢。
bootstrap4.0图标使用_详解Bootstrap glyphicons字体图标相关推荐
- python 3.6.0新语法_详解Python3.6正式版新特性
按照Python官网上的计划,Python3.6正式版期望在2016-12-16号发布,也就是这周五.从去年的5月份开始,Python3.6版本就已经动手开发了,期间也断断续续的发布了4个Alpha版 ...
- bootstrap图片叠加_详解Bootstrap四种图片样式
在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获 ...
- python归一化后全部都是0咋办_详解python实现数据归一化处理的方式:(0,1)标准化...
在机器学习过程中,对数据的处理过程中,常常需要对数据进行归一化处理,下面介绍(0, 1)标准化的方式,简单的说,其功能就是将预处理的数据的数值范围按一定关系"压缩"到(0,1)的范 ...
- Android9.0 Launcher启动Activity详解(一)
一.开始 Launcher中点击应用图标启动Activity,其开始方法是 public boolean startActivitySafely(View v, Intent intent, Item ...
- Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- mysql如何进行压测_详解MySQL如何按表创建千万级的压测数据
有时我们要对系统做压测,或者数据库压力测试,这时候需要对某些表插入几百万或者上千万数据,下面介绍下怎么利用MySQL循环和存储过程对特定表的创建千万行数据. 1. 准备测试表 CREATE TABLE ...
- 关于android的4.2的0文件夹的详解
关于android的4.2的0文件夹的详解 ---- android 4.0 ---- 在galaxy nexus(GN)手机上userdata分区很大,被挂在/data目录,用户的数据通常是放在sd ...
- html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程 这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装 可以 ...
- mysql8.0.11 安装顺序_mysql 8.0.11 安装步骤详解
本文为大家分享了mysql 8.0.11 安装步骤,供大家参考,具体内容如下 第一步:下载安装包 MYSQL官方下载地址:官方下载 这里第一项是在线安装,第二项是离线包安装,我选择的是第二项(不用管你 ...
最新文章
- 心得 : 面向对象和面向过程的区别
- sphinx索引文件进一步说明——最好是结合lucene一起看,直觉告诉我二者本质无异...
- 学习lulu之——tips 提示
- 不抓包,如何学得了 TCP
- Qt Creator调试Qt Quick示例应用程序
- 串口项目——Cseiralport类的应用(1 )
- linux视图版怎么输入命令,分享在Linux命令下操作MySQL视图实例代码
- 【课题总结】OpenCV 抠图项目实战(4)固定阈值抠图
- 检查电脑是否被安装***三个小命令
- java多线程批量读取文件(七)
- python 比较序列是否包含同样元素_Python学习之常见序列比较
- 研发管理 - 流程篇
- 图书馆管理系统的开发
- 国内免费汉语语料库-NLP
- 关于十二平均律及律学发展简史
- matlab rloess,R语言利用loess如何去除某个变量对数据的影响详解
- 精选汇总 | 开心一刻
- Pygame(四)画椭圆,弧
- Landsat系列卫星介绍及影像下载
- 多想别人学习。增强编程能力。