详解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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
vue-test-utils初使用详解
May 23 Javascript
Element Input输入框的使用方法
Jul 26 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
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
简单的js表单验证函数
2013/10/28 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JS高级运动实例分析
2016/12/20 Javascript
WebPack基础知识详解
2017/01/16 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python实现注册登录系统
2017/08/08 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python支持多继承吗
2020/06/19 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
班级年度安全计划书
2014/05/01 职场文书
活动总结报告范文
2014/05/04 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL