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 ...
随机推荐
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目
前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...
- iOS知识点持续更新。。。
1.自动布局拉伸和压缩优先级 Autolayout中每个约束都有一个优先级,优先级的范围是1~1000.创建一个约束,默认的优先级最高是1000. Content Hugging Priority:该 ...
- Isomorphism 同构
小结: 1.两个有限维度的向量空间,在同一数域下,是同构的 等价于 它们维数相等. Isomorphism 同构 0.1.8 Isomorphism. If U and V are vector sp ...
- iOS-Core-Animation-Advanced-Techniques/13-高效绘图 【没理解】
#import "DrawingView.h" #import <QuartzCore/QuartzCore.h> @interface DrawingView () ...
- Windows7安装两个jdk配置
win7 配置两个jdk,之前装了jdk1.6,项目需要安装1.8. 首先去oracle官网下载一个和你eclipse版本一致的jdk(我的是32位). 网址:https://www.oracle.c ...
- HTML5 自定义属性
先声明 HTML5的自定义属性浏览器支持性不太好 目前只有firefox6+和chrome浏览器支持 元素除了自带的属性外 另外也可以加自定义属性 不过需要在前面加上data- 下面举个例子 ...
- 批量增删改"_bulk"
除了delete以外,每个操作需要两个json字符串,语法如下:{"action":{"metadata"}}{"data"}bulk ap ...
- vivado SDK之找不到"platform.h"
解决方法:建工程的时候不要选择empty application,而是选择hello world,里面会自动包含platform.c,platform.h等. 另外,常用的xgpio.h头文件有时候 ...
- more 命令
[root@localhost ~]# .txt # 按页显示文件内容,能向下翻页查看
- laravel项目ThinkSNS+安装
ThinkSNS+ 是一个使用 Laravel 开发,并且功能繁多且健壮的社交程序.今天我们来跟着ytkah一起来尝鲜一下.首先PHP 版本必须大于 7.1.3,已经下载并安装过 Composer,拥 ...