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. Unslider.js Tiny Sample

    <!-- The HTML --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&g ...

  2. .htaccess 基础教程（三）RewriteCond标志符，RewriteRule适用的标志符

    1.利用 .htaccess 防止盗链 如果不喜欢别人在他们的网页上链接自己的图片.文档的话,也可以通过htaccess的指令来做到.当然这样也可以对你的网站服务器压力变小! 这次先给出‘代码’,然后 ...

  3. 获取url传参

    function urlparameterforkey(name) { //读取html 数据 ); //待处理的字符串 var patt = new RegExp(name); //要查找的字符串 ...

  4. word20161215

    name / 名称 name mapping / 名称映射 name resolution / 名称解析 name server (NS) resource record / 名称服务器资源记录 na ...

  5. tornadod的异步代码

    #!/usr/bin/env python # -*- coding: utf-8 -*- import tornado.httpserver import tornado.ioloop import ...

  6. log4cxx

    1.简介 (1)Apache log4cxx当前是由Apache软件基金会进行维护.它是java中著名开源项目Apache log4j在c++中对应的日志框架.它是借助于APR(Apache Port ...

  7. NEFU 561 方块计算

    题目链接 简单搜索题 #include <cstdio> #include <iostream> #include <cstring> using namespac ...

  8. 数据库Blob数据类型转String

    blob数据是存储大对象数据类型, 一般存放二进制的,所以才用字节存取. 首先判断blob数据是否为空,然后采用输入流读出数据,具体代码如下: String content = null; try { ...

  9. python中如何避免中文是乱码

    这个问题是一个具有很强操作性的问题.我这里有一个经验总结,分享一下,供参考:首先,提倡使用utf-8编码方案,因为它跨平台不错.经验一:在开头声明: # -*- coding: utf-8 -*- 有 ...

  10. ASP.NET知识总结（4.请求管道中的19个事件）

    (1)BeginRequest: 开始处理请求 (2)AuthenticateRequest授权验证请求,获取用户授权信息 (3):PostAuthenticateRequest获取成功 (4): A ...