详解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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
关于PHP语言构造器介绍
2013/07/08 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
layui表格实现代码
2017/05/20 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
小程序实现录音上传功能
2019/11/22 Javascript
js实现内置计时器
2019/12/16 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
virtualenv实现多个版本Python共存
2017/08/21 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
女子职高个人自荐书
2014/02/01 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
总经理检讨书
2014/09/15 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Flask搭建一个API服务器的步骤
2021/05/28 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
nginx配置指令之server_name的具体使用
2022/08/14 Servers