详解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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Node.js返回JSONP详解
May 18 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
php获取excel文件数据
2017/04/21 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
document.createElement()用法
2013/03/13 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
网络书店创业计划书
2014/02/07 职场文书
上班看电影检讨书
2014/02/12 职场文书
秋冬农业生产标语
2014/10/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
Python数据结构之队列详解
2022/03/21 Python