<!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. CAAnimationDelegate 代理方法没调用

    CAAnimationDelegate 代理方法没调用 应该在 addAnimation调用之前设置代理

  2. python 遍历list并删除部分元素

    python 遍历list并删除部分元素https://blog.csdn.net/afgasdg/article/details/82844403有两个list,list_1 为0-9,list_2 ...

  3. PopupMenu动态创建菜单

    1.TPopupMenu一条横线在Caption输入一个'-'就可以了.2.在Caption输入名字之后加入一个&就可以不显示快捷键,比如: 退出&  这样退出按钮的快捷键就不会显示出 ...

  4. BZOJ4391 High Card Low Card [Usaco2015 dec]（贪心+线段树/set库

    正解:贪心+线段树/set库 解题报告: 算辣直接甩链接qwq 恩这题就贪心?从前往后从后往前各推一次然后找一遍哪个地方最大就欧克了,正确性很容易证明 (这里有个,很妙的想法,就是,从后往前推从前往后 ...

  5. 简单的document操作

    1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...

  6. LeetCode-52.N-Queen II

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  7. python 合并列表 从大到小排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- a = [1,2,3,4,5] b = [6,7,8,9,10] a.extend(b) a.reverse ...

  8. 网络传输--UDP

    UDP网络编程 一.优缺点 二.套接字socket 三.类型转换 四.UDP发收数据 五.广播和聊天器案例 回到顶部 一.优缺点 UDP : 无连接 (发送端无需确认接收端是否收到), 其主要用途为音 ...

  9. CSS3-Hover 效果 展示

    首先说说兼容性的问题吧,主要说说IE浏览器的兼容性.IE10+. 效果展示的css代码: .button { margin: .4em; padding: 1em; cursor: pointer; ...

  10. 拖拽控件java版

    Button vv = new Button("vvvv");  DragSource.getDefaultDragSource().createDefaultDragGestur ...