本章将讲解Bootstrap glyphicons字体图标，并通过一些实例了解它的使用，字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中
 

本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。

首先给大家介绍什么是字体图标：

字体图标是在 Web 项目中使用的图标字体。字体图标在下载的Bootstrap的fonts文件夹中。

1
2
3
4
5
6
7
8
9
10
11
.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即可。

使用方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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的颜色，可以改变字体图标的颜色，如下：

1
2
3
4
5
6
7
8
9
10
11
<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，都可以改变字体图标的颜色。

应用文本阴影

1
2
3
4
5
6
7
8
9
10
11
<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字体图标的相关知识，希望大家喜欢。

BootStrap glyphicons字体图标的更多相关文章

  1. Bootstrap WPF Style(二)--Glyphicons 字体图标

    介绍 关于Glyphicons字体图标,首先给出友情链接 Glyphicons 这个项目是在Bootstrap WPF Style项目基础上做的,详见http://www.cnblogs.com/ts ...

  2. Glyphicons字体图标

    Glyphicons字体图标-----好处可以减少请求,容易控制样式! <p> <button type="button" class="btn btn ...

  3. Bootstrap--组件之Glyphicons字体图标

    Glyphicons 字体图标 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标.Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bo ...

  4. 项目经验：Glyphicons字体图标改造，制造适合自己项目的字体图标

    Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...

  5. Bootstrap进阶一：Glyphicons 字体图标

    基本组件是Bootstrap的精华之一,其中都是开发者平时需要用到的交互组件.例如:网站导航.标签页.工具条.面包屑.分页栏.提示标签.产品展示.提示信息块和进度条等.这些组件都配有jQuery插件, ...

  6. Bootstrap之字体图标

    优点:1.减少请求 2.容易控制样式 所在位置:在下载的bootstrap文件中的fonts文件夹存放字体图标 默认路径为当前目录下,如需修改路径,则需在bootstrap.css中查找font-fa ...

  7. 关于font awesome或Glyphicons字体图标不能正确显示的问题

    此处讨论的是关于本地字体的安装和引进 实际操作经验中,某些网站模板设置的CSS, FONTS目录较深,如果按默认的路径设置,字体图标死活都不会显示. 解决办法是将FONTS目录,安装在网站根目录下 C ...

  8. MVC.NET 发布后，部署到iis ，网站中的Bootstrap的字体图标不能正常显示

    时隔多日没有在博客中记录自己遇到的问题及解决方案了 ,今天给大家分享一个可能会遇到的一个鸡肋bug ! 如果你的项目是MVC并且在项目中引用了 Boostrap 框架,你在编辑发布后部署到iis的时候 ...

  9. Glyphicons 字体图标

随机推荐

  1. [置顶] 文件和目录（二）--unix环境高级编程读书笔记

    在linux中,文件的相关信息都记录在stat这个结构体中,文件长度是记录在stat的st_size成员中.对于普通文件,其长度可以为0,目录的长度一般为1024的倍数,这与linux文件系统中blo ...

  2. get_template_part() 函数详解备忘（转）

    最近研究官方主题 Twenty Eleven ,有一些东西网上现成的中文资料不好找,在博客里记载下来,算是分享,也算是备忘,wordpress 3.0 以后就开始便有了get_template_par ...

  3. Java：浅谈InputStream的close方法

    原则:最好在任何时候使用InputStream或者OutputStream的时候,在finally中调用close()方法,显式关闭. 一个典型的示例 InputStream in = null; t ...

  4. MEF 编程指南（二）：定义可组合部件和契约

    可组合部件(Composable Parts)   在 MEF 内部可组合部件是一个可组合单元.可组合部件导出其他可组合部件需要的服务,并且从其他可组合部件导入服务.在 MEF 编程模型中,可组合部件 ...

  5. hadoop数据[Hadoop] 实际应用场景之 - 阿里

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.明天在这里和大家一起学习一下hadoop数据 Hadoop在淘宝和支付宝的应用从09年开始,用于对海量数据的离线处置,例如对日志的分析,也涉及内 ...

  6. JAVA实现HTTPserver端

    用java socket实现了一个简单的httpserver, 能够处理GET, POST,以及带一个附件的multipart类型的POST.尽管中途遇到了非常多问题, 只是通过在论坛和几个高手交流了 ...

  7. BZOJ 1051: [HAOI2006]受欢迎的牛 缩点

    1051: [HAOI2006]受欢迎的牛 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/ ...

  8. 异步消息总线hornetq学习-03客户端连接hornet进行jms消息的收发-非jndi方式连接

    在上节中介绍了通过jndi方式连接到hornetq服务器上,有时候由于某些原因,我们不希望通过jndi方式连接,hornetq也支持这种方式进行 以第2章节的例子为模板,我们编写了另一个获取Conne ...

  9. 关于android开发添加菜单XML文件之后无法在R.java中生成ID的问题

    因为和同学分开做的android软件,现在想整合他做的界面部分,于是拷贝了res和src文件夹的文件,其中包括一个res.menu文件夹中的XML.但是每次将该文件导入到工程总无法自动在R.java中 ...

  10. iOS开发——语法篇OC篇&高级语法精讲二

    Objective高级语法精讲二 Objective-C是基于C语言加入了面向对象特性和消息转发机制的动态语言,这意味着它不仅需要一个编译器,还需要Runtime系统来动态创建类和对象,进行消息发送和 ...