<!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <link href="css/bootstrap.min.css">

     <!--[if lt IE 9]>

     <script src="js/html5shiv.min.js"></script>

     <script src="js/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

 <div class="container">

     <h1>常用图标字体</h1>

     <h3>首页-glyphicon-home</h3>

     <a class="btn btn-success" href="#">

         <span class="glyphicon glyphicon-home"></span>

     </a>

   <h3>齿轮-glyphicon-cog</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-cog"></span>

     </a>

     <h3>定位-glyphicon-map-marker</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-map-marker"></span>

     </a>

     <h3>邮件-glyphicon-envelope</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-envelope"></span>

     </a>

     <h3>实星-glyphicon-star，空星-glyphcion-srat-empty</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-star"></span>

         <span class="glyphicon glyphicon-star-empty"></span>

     </a>

     <h3>实心glyphicon-heart，空心glyphicon-heart-empty</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-heart"></span>

         <span class="glyphicon glyphicon-heart-empty"></span>

     </a>

     <h3>+号glyphicon-plus，-号-glyphicon-minus</h3>

     <a class="btn btn-success">

         <span class="glyphicon glyphicon-plus"></span>

         <span class="glyphicon glyphicon-minus"></span>

     </a>

 </div>

 <script src="js/jquery-1.11.3.js"></script>

 <script src="js/bootstrap.js"></script>

     <script>

     (function () {

         var s = document.createElement("script");

         s.onload = function () {

             bootlint.showLintReportForCurrentDocument([]);

         };

         s.src = "js/bootlint.js";

         document.body.appendChild(s)

     })();

 </script>

 </body>

 </html>

Bootstrap-常用图标glyphicon的更多相关文章

  1. bootstrap字体图标

    bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...

  2. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

  3. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  4. 解决本地Bootstrap字体图标不可见的问题

    原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...

  5. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  6. bootstrap字体图标在谷歌显示正常，在火狐显示异常的问题

    bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...

  7. bootstrap的图标无法正常显示解决方法

    bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...

  8. Bootstrap中的Glyphicon 字体图标

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

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-envelope

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. HTML5：基本语句

    HTML5:超文本标记语言(HTML)第五次重大修改 我用的sulime编辑器,用Package contorl后安装emmet插件来编辑HTML代码,以下为sublime操作小技巧 ctrl+s 保 ...

  2. prometheus: celery, redis-export

    https://github.com/nlighten/tomcat_exporter https://github.com/prometheus/jmx_exporter https://vexxh ...

  3. Page5：状态转移矩阵及性质、连续线性系统离散化及其性质[Linear System Theory]

    内容包含脉冲响应矩阵和传递函数矩阵之间的关系,状态转移矩阵及性质,以及线性连续系统离散化及其性质

  4. [daily][qemu][libvirt] 使用libvirt管理qemu

    别人创建的虚拟机.用libvirt做的配置. 我一直是手写qemu脚本的,不会用virtsh,所以,学一下. ------------------ 先来个arch的文档: https://wiki.a ...

  5. [knowledge][DPI] kernel bypass 高性能网络包处理的宏观思路

    高性能网络包处理,这个问题的出现,主要原因在于linux内核协议栈的处理能力,已经跟不上日益增长的网卡吞吐量以及数据量. 有关详细的内核协议栈瓶颈的阐述,可以参考如下这篇文章: <Improvi ...

  6. c++ Stl 随笔

    1. template <class InputIterator, class Distance> void advance (InputIterator& it, Distanc ...

  7. sharepoint webapp 部署注意点

    只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时,才能使用会话状态.还请确保在应用程序配置的 // 节中包括 System.Web.SessionSta ...

  8. HD200703

    #include<iostream> #include<cstdio> #include<cstdlib> #include<cstring> #inc ...

  9. Linux I/O 调度器

    每个块设备或者块设备的分区,都对应有自身的请求队列,  而每个请求队列都可以选择一个I/O调度器来协调所递交的.I/O调度器的基本目的是将请求按照它们对应在块设备上的扇区号进行排列,以减少磁头的移动, ...

  10. linux 查看网卡流量：sar

    sar(System Activity Reporter 系统活动情况报告)是目前 Linux 上最为全面的系统性能分析工具之一,可以从多方面对系统的活动进行报告,但我们一般用来监控网卡流量 # 安装 ...