详解Bootstrap glyphicons字体图标

 更新时间:2016年01月04日 11:02:42   投稿:mrr   我要评论
本章将讲解Bootstrap glyphicons字体图标,并通过一些实例了解它的使用,字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中

本章将讲解字体图标(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>

配合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> 

效果:

定制字体图标

在上一个例中,其实我们已经实现了对字体图标大小和颜色的定制,此处再做进一步说明。

通过改变字体的大小或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>

效果:

可以看出:通过改变其父元素或者是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官方文档:


以上内容给大家介绍了Bootstrap glyphicons字体图标的相关知识,希望大家喜欢。

相关文章

  • Javascript 检测、添加、移除样式(className)函数代码

    Javascript 检测、添加、移除样式(className)函数代码

    在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
    2009-09-09
  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6,刚刚看到Iterator和for...of循环这一章,所以想要跟大家略微分享一下,下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料,不足之处还望大家多多指正,需要的朋友们可以参考学习。
    2017-05-05
  • React中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 技术男用来对妹子表白的百度首页

    技术男用来对妹子表白的百度首页

    这篇文章主要介绍了技术男用来对妹子表白的百度首页,非常有创意、有意思,需要的朋友可以参考下
    2014-07-07
  • javascript 移动特效的实现代码

    javascript 移动特效的实现代码

    下面小编就为大家带来一篇javascript 移动特效的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript实现网站访问次数代码

    JavaScript实现网站访问次数代码

    每个网站管理者,都必须知道每天有多少人访问了本站,需要一个网站访问次数功能来满足需求,本篇文章主要介绍了JavsScript实现网站访问次数代码,需要的朋友可以参考下
    2015-08-08
  • React-Native使用Mobx实现购物车功能

    React-Native使用Mobx实现购物车功能

    本篇文章主要介绍了React-Native使用Mobx实现购物车功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • 微信小程序实现点击空白隐藏的方法示例

    微信小程序实现点击空白隐藏的方法示例

    这篇文章主要介绍了微信小程序实现点击空白隐藏的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能

    最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令,可是这样很麻烦,下面小编给大家带来了js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能,需要的朋友参考下
    2018-01-01

最新评论