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. [Unity] Cg标准函数库

  2. jquery 判断网络资源,网络文件是否存在

    前提是,不能跨域访问引入jquery库<script src="jQuery.js" type="text/javascript"></scr ...

  3. TransactionScope 之分布式配置

    .Net开发过程中,涉及多个数据库和不同数据库的分布式事务(Distributed Transaction)开发,有时会碰到“与基础事务管理器的通信失败”的错误.导致这个错误一般有下列三个原因:1)  ...

  4. PHP cookie

    PHP Cookie cookie 常用于识别用户. Cookie 是什么? cookie 常用于识别用户.cookie 是一种服务器留在用户计算机上的小文件.每当同一台计算机通过浏览器请求页面时,这 ...

  5. 【Alpha版本】冲刺阶段——Day 2

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  6. 使用bootstrap tooltip控件动态修改提示内容

    初始化控件之后即使修改了元素的title内容也不会更改提示信息,比如下面 $(element).attr('title','XXXXXX') 这样只会增加一个原生的title提示,如果保持原样显示必须 ...

  7. CSS3 @media 查询

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 媒体查询包含了一个媒体类型和CSS3规范中描述的包含一个或多个表达式的媒体属性, ...

  8. Pycharm 快捷键

    Ctrl + Alt + Space   快速导入任意类 Alt + enter键    快速导入模块.创建类 Ctrl + /  注释/取消行注释 Ctrl + Shift + /         ...

  9. 关于awk的逗号问题

    对于awk逗号的问题,我昨天看的一本书有提过: <Linux就是这个范儿>挺好的书,大家可以看看~~~~ 测试过,总结如下(不知道总结有没有错,欢迎大家吐槽,欢迎大家吐槽,吐槽,吐槽... ...

  10. c/c++字符串定义及使用的对比

    c/c++中使用字符串的频率还是比较高的,下面就字符串的不同定义及其使用方法做一些对比 字符串一般有以下三种定义方法: 1.char *p="hello"; 2.char str[ ...