详解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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
javascript new fun的执行过程
Aug 05 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue内置组件transition简单原理图文详解(小结)
Jul 12 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python分割文件的常用方法
2014/11/01 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
如何基于线程池提升request模块效率
2020/04/18 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
大专应届生个人简历的自我评价
2013/10/15 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
2014年清明节寄语
2014/04/03 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
面试感谢信范文
2015/01/22 职场文书
责任书格式
2015/01/29 职场文书
保卫工作个人总结
2015/03/03 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫