<!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. xCode 升级9.3之后巨卡

    因为项目要适配iPhone8, iPhoneX 等.需要升级Xcode需要升级到9.3.但是 MAC系统是10.12的,需要升级到10.13. 系统升级完之后升级Xcode.之后Xcode 就各种卡. ...

  2. day12:装饰器的进阶

    1,三元运算符:变量 = 条件返回True的结果 if 条件 else 条件返回false的结果:必须要有结果:必须要有if和else,只能是简单的情况. 2,传参包起来,星号打散 def outer ...

  3. 使用IntelliJ IDEA创建Maven聚合工程、创建resources文件夹、ssm框架整合、项目运行一体化

    一.创建一个空的项目作为存放整个项目的路径 1.选择 File——>new——>Project ——>Empty Project 2.WorkspaceforTest为项目存放文件夹 ...

  4. 【Jmeter】if控制器+循环控制器+计数器，控制接口分支

    但是我不想这么做,接口只想写一次,让循环控制器和if控制器去判断接口,执行我想要的分支.这里遇到了一个问题,if控制器通过什么去判断接下来的分支?我引入了一个计数器的概念.起始值为0,每次循环加1,将 ...

  5. Linux ifconfig 命令

    在centos6 自带ifconfig 在centos7 默认不带ifconfig,需要自己安装 ifconfig命令用来配置或查看网卡接口,常见用法如下: 安装ifconfig命令 [root@my ...

  6. AsyncStorage和Promise配合使用

    代码: AsyncStorage封装 import {AsyncStorage} from "react-native"; class DeviceStorage { //保存数据 ...

  7. Ubuntu如何修改默认python版本为python3

    修改默认python版本 Ubuntu系统内置python2.7版本,默认运行python就是运行python2.7.现在很多人都是用python3作为开发语言,我们需要修改python的默认版本为p ...

  8. 前端框架之Vue(3)-计算属性

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  9. 图片在IE8浏览器多一个有边框问题解决办法

    最后在网上找了一下答案,IE8浏览器图片多一个有色边框,而Chrome浏览器没有边框的解决办法.   指定img的边框样式:   img{border-style:none;}

  10. [vue]模拟移动端三级路由: router-link位置体现router的灵活性

    小结 router-link可以随便放 router-view显示的是父组件的直接子组件的内容 想研究下移动三级路由的逻辑, 即 router-link和router-view 点首页--点新闻资讯( ...