Bootstrap-常用图标glyphicon
<!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的更多相关文章
- bootstrap字体图标
bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题
bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...
- bootstrap的图标无法正常显示解决方法
bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...
- Bootstrap中的Glyphicon 字体图标
在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果. 1 <!DOCTYPE html> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-envelope
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- LeetCode 883 Projection Area of 3D Shapes 解题报告
题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. ...
- Delphi 打开网址
1. 通过iexplore.exe打开:ShellExecute(0, 'open', 'iexplore.exe', PChar('http://www.100xuekao.com'), '', S ...
- 利用Python进行自然语言处理(笔记)第一章
一.标识符 一个我们想要放在一组对待的字符序列--如:”hairy“.”his“或者”:“: 二.词类型 一个词在一个文本中独一无二的出现形式或拼写,也就是说这个词在词汇表中是唯一的.如果我们计数的项 ...
- JavaScript学习(六)
这里要注意: 1.num为NaN(因为str的开头不是数字) 2.NaN和NaN是不等的 3.NaN也是number.
- QPS、PV 、RT(响应时间)之间的关系
QPS.PV .RT(响应时间)之间的关系 在进行系统性能压测和系统性能优化的时候,会涉及到QPS,PV,RT相关的概念,本文总结一下QPS,PV,RT之间的关系,放在博客备忘,本文参考了之前在淘宝工 ...
- MySQL前缀索引和索引选择性
有时候需要索引很长的字符列,这会让索引变得大且慢.通常可以索引开始的部分字符,这样可以大大节约索引空间,从而提高索引效率.但这样也会降低索引的选择性.索引的选择性是指不重复的索引值(也称为基数,car ...
- 自定义PopView
改代码是参考一个Demo直接改的,代码中有一些漏洞,如果发现其他的问题,可以下方直接留言 .h文件 #import <UIKit/UIKit.h> typedef void(^Popove ...
- blockdev命令 blkid命令 lsblk命令
blockdev命令 blkid命令 lsblk命令 http://www.jb51.net/LINUXjishu/310389.html block相关的命令 这篇文章主要介绍了Linux bl ...
- 爬虫请求库——selenium
selenium模块 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题.selenium的缺点是效率会变得很慢. sel ...
- dxRangeTrackBar使用教程
Properties: Max:最大值 Min:最小值 Frequency:设置刻度值多大值显示PageSize:选择时跳动的区域大小 SelectionColor:选择区域颜色 ShowSelect ...