详解Bootstrap glyphicons字体图标


Posted in Javascript onJanuary 04, 2016

本章将讲解字体图标(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即可。

使用方法:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset = "utf-8"> 
  <title>demo</title> 
  <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> 
  <style type="text/css"> 
    body{padding: 20px;} 
  </style> 
</head> 
<body> 
  <span class = "glyphicon glyphicon-lock"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:30px;"></span> 
  <span class = "glyphicon glyphicon-lock" style = "font-size:60px;"></span>   
</body> 
</html>

详解Bootstrap glyphicons字体图标

配合button使用:

<body> 
  <button class="btn btn-default"> 
    <span class = "glyphicon glyphicon-home"></span> 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-info"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-lg"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-warning btn-sm"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
</body>

效果:

详解Bootstrap glyphicons字体图标

定制字体图标

在上一个例中,其实我们已经实现了对字体图标大小和颜色的定制,此处再做进一步说明。

通过改变字体的大小或button的大小,可以改变字体图标的大小。

通过设置color的颜色,可以改变字体图标的颜色,如下:

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success" style="color:#FF0000;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home" style="color:#FF0000;"></span> Home 
  </button> 
</body>

效果:

详解Bootstrap glyphicons字体图标

可以看出:通过改变其父元素或者是span本身的color,都可以改变字体图标的颜色。

应用文本阴影

<body> 
  <button class="btn btn-success"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg" style="text-shadow: black 3px 2px 3px;"> 
    <span class = "glyphicon glyphicon-home"></span> Home 
  </button> 
  <button class="btn btn-success btn-lg"> 
    <span class = "glyphicon glyphicon-home" style="text-shadow: black 3px 2px 3px;"></span> Home 
  </button> 
</body>

详解Bootstrap glyphicons字体图标

更多请查看字体图标,可以bootstrap官方文档:

详解Bootstrap glyphicons字体图标

以上内容给大家介绍了Bootstrap glyphicons字体图标的相关知识,希望大家喜欢。

Javascript 相关文章推荐
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 #Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
零基础php编程好学吗
2019/10/11 PHP
jquery实用代码片段集合
2010/08/12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
详解webpack异步加载业务模块
2017/06/23 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
javascript实现倒计时提示框
2021/03/02 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Python如何生成树形图案
2018/01/03 Python
Python 发送邮件方法总结
2020/08/10 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
企业安全生产月活动总结
2014/07/05 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
主持人开幕词
2015/01/29 职场文书
2015年统战工作总结
2015/05/19 职场文书
闪闪红星观后感
2015/06/08 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang