Bootstrap中的Glyphicon 字体图标

在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

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

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

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

  2. Bootstrap中的Glyphicon 字体图标

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

  3. fontawesome-iconpicker 自定义字体图标选择器

    官网地址:https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../cs ...

  4. 初学者--bootstrap（六）组件中的字体图标----在路上（9）

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

  5. Bootstrap之字体图标

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

  6. Bootstrap<基础十一>字体图标(Glyphicons)

    字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...

  7. bootstraps字体图标无法显示

    使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...

  8. Glyphicons字体图标

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

  9. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

随机推荐

  1. Rabbitmq Exchange Type 说明

    Exchange在定义的时候是有类型的,以决定到底是哪些Queue符合条件,可以接收消息 fanout 所有bind到此exchange的queue都可以接收消息 direct 通过routingKe ...

  2. log4j的使用详细解析

    1 Log4j配置说明 1.1 配置文件Log4j可以通过java程序动态设置,该方式明显缺点是:如果需要修改日志输出级别等信息,则必须修改java文件,然后重新编译,很是麻烦: log4j也可以通过 ...

  3. [Python] Python学习笔记之常用模块总结[持续更新...]

    作为一种极其简单的编程语言,Python目前成为了最炙手可热的几种语言之一.它不仅简单易学,而且它还为用户提供了各种各样的模块,功能强大,无所不能.有利必有弊,学习Python同样有困扰,其中之一就是 ...

  4. VC调试闪退解决办法

    在VC2010调试或执行EXE文件时,程序运行结束后自动退出了,想看到打印 可以采用几种方法: 1.按ctrl+F5只执行不调试 2.在cmd中手动调用 而不是直接点 3.加入getchar  #in ...

  5. Windows下安装MongoDB

    项目当中用到MongoDB最为NoSQL数据库,运行的平台为 Windows Server 2008,下面是MongoDB的安装过程笔记: 1.下载软件 官方下载地址:http://www.mongo ...

  6. oracle插入数据时解决和旧数据id的冲突

    我们在使用oracle创建一个主键的时候需要让他自增, 但是他跟mysql不同,需要创建序列,具体看下面: 可以删除之前创建的sequence,我们在重新创建一个: DROP SEQUENCE SJG ...

  7. php自动加载

    初學PHP時,最早會面對的問題之一就是require與include差別何在?require_once與include_once又是什麼?弄懂這些問題之後,如果不使用framework,直接開發,便常 ...

  8. ecshop二次开发 给商品添加自定义字段【包含我自己进一步的开发实例详解】

    本文包含商品自定义添加教程及进一步的开发实例: 教程: 说起自定义字段,我想很多的朋友像我一样会想起一些开源的CMS(比如Dedecms.Phpcms.帝国)等,他们是可以在后台直接添加自定义字段的. ...

  9. ecshop二次开发常用文件位置

    语言包修改: /language/zh_cn/admin/common.php 商品详情页模板: /themes/**/goods.dwt  (最下方有changePrice() 点选属性或改变数量时 ...

  10. java导出生成word（类似简历导出）

    参考帖子: http://www.cnblogs.com/lcngu/p/5247179.html http://www.cnblogs.com/splvxh/archive/2013/03/15/2 ...