详解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 相关文章推荐
javascript中的对象创建 实例附注释
Feb 08 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 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
杏林同学录(六)
2006/10/09 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JS中Location使用详解
2015/05/12 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python创建xml文件示例
2017/03/22 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python如何控制进程或者线程的个数
2020/10/16 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
大三自我鉴定范文
2013/10/05 职场文书
美术课外活动总结
2014/07/08 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL