在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

 1 <!DOCTYPE html>

 2 <html>

 3   <head>

 4     <meta charset="utf-8">

 5     <title>Bootstrap 实例</title>

 6     <!-- 包含头部信息用于适应不同设备 -->

 7     <meta name="viewport" content="width=device-width, initial-scale=1">

 8     <!-- 包含 bootstrap 样式表 -->

 9     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

10   </head>

11

12

13   <body>

14     <div class="container">

15       <h2>图标</h2>

16       <p>插入图标:</p>

17       <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>

18       <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>

19       <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>

20       <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>

21       <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>

22     </div>

23

24   </body>

25

26 </html>

上面的运行代码如下：

下面是部分

参考地址：http://www.bkjia.com/webzh/951332.html

Bootstrap中的Glyphicon 字体图标的更多相关文章

  1. Glyphicon 字体图标

    Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效 ...

  2. Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...

  3. （转）Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphico ...

  4. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  5. （22）bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  6. 如何在Axure中使用FontAwesome字体图标

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. FontAwesome应用在web网页开发中非常方便, ...

  7. element-ui中使用font-awesome字体图标

    element-ui提供的字体图标是很少的,所以我们需要集成其它图标来使用,nodejs的集成官方有说明,这里说明一下非nodejs开发集成图标 首先下载fontawesome,需要更改里面图标前缀, ...

  8. Chrome 对于 glyphicon 字体图标不显示的解决的方法

    在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到  custom.css 文件,路径为: C:\Users\(username)\App ...

  9. vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

随机推荐

  1. 10-24C#基础--枚举

    一.枚举 1.定义:在程序编写中,枚举同结构体是并列的,位于Class下面:枚举是常量的集合. enum meiju://枚举是常量的集合,一般冒号后面不指定数据类型 2.格式: enum meiju ...

  2. Python垃圾回收机制:gc模块

    在Python中,为了解决内存泄露问题,采用了对象引用计数,并基于引用计数实现自动垃圾回收. 由于Python 有了自动垃圾回收功能,就造成了不少初学者误认为不必再受内存泄漏的骚扰了.但如果仔细查看一 ...

  3. 第5章 选举模式和ZooKeeper的集群安装 5-1 集群的一些基本概念

    xx就是我们的master,也就是我们的主节点.心跳机制,当有一个节点挂掉之后,整个集群还是可以工作的.选举模式,我们现在的master是正常运行的,但是在某些情况下它宕机了死机了,那么这个时候它这个 ...

  4. 主机(windows)与VMware虚拟机(linux)互传文件

    网上有不少教程,比如http://bbs.kafan.cn/thread-451327-1-1.html,我仅记录我平时用的方法. 1.VMware tools:  如果有网,且Linux有桌面的,可 ...

  5. Codeforces 1107E (Vasya and Binary String) (记忆化，DP + DP)

    题意:给你一个长度为n的01串,和一个数组a,你可以每次选择消除一段数字相同的01串,假设消除的长度为len,那么收益为a[len],问最大的收益是多少? 思路:前两天刚做了POJ 1390,和此题很 ...

  6. Ros问题汇总

    1.ImportError: No module named beginner_tutorials.srv 解决: cd ~/catkin_ws $ source devel/setup.bash $ ...

  7. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-005插入排序的改进版

    package algorithms.elementary21; import algorithms.util.StdIn; import algorithms.util.StdOut; /***** ...

  8. parseXXX的用法

    转换字符串. parseXXX是Integer类.等基本数据类型包装类的方法,用于实现String和int型数据的转换.例如, Integer.getInteger(String s) 从字符串中获取 ...

  9. loj10102 旅游航道

    传送门 分析 一道喜闻乐见的求桥的板子题. 代码 #include<iostream> #include<cstdio> #include<cstring> #in ...

  10. netty中的位操作

    看了PoolChunk源码,好多位操作,对这些位操作理解不到位,看起来很是吃力,不知道为什么要这么做,可能是性能更好 1:大小为2 的冥的数加1 怎么操作 size^1; 2: <=比较   m ...