官方地址

https://v3.bootcss.com/components/#glyphicons

glyphicons官方地址

http://glyphicons.com/

基类

.glyphicon

说明

图标类只能应用在不包含任何文本内容或子元素的元素上。
为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

用法

<div class="container"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div>

<div class="container"><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 删除</button><button type="button" class="btn btn-info"><span class="glyphicon glyphicon-edit"></span> 编辑</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> 登录</button><button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-thumbs-up"></span> 赞</button>
</div>

整体代码

<!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"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>16图标</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head>
<body style="background-color: #ccc;"><pre class="pre-scrollable">glyphicon图标官方地址：http://glyphicons.com/基类.glyphicon说明：1. 图标类只能应用在不包含任何文本内容或子元素的元素上。2. 为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。</pre><div class="container"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div>
<p></p>
<div class="container"><button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> 删除</button><button type="button" class="btn btn-info"><span class="glyphicon glyphicon-edit"></span> 编辑</button><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> 登录</button><button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-thumbs-up"></span> 赞</button>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

BootStrap3 图标glyphicon相关推荐

解决Bootstrap字体图标glyphicon无法显示的问题
我们在官网下载了Bootstrap3版本的文档使用时,在我们将bootstrap.min.css文件引入到自己Web项目中,使用字体图标glyphicon时,图标无法正常显示,例如: <!DOC ...
Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案
Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案参考文章: (1)Bootstrap4 glyphicon 移除图标 glyphicon fo ...
bootstrap 文字图标 glyphicon class 不显示
关于bootstrap 文字图标不显示问题 @font-face的使用需要的文件(就是第二个 fonts) @font-face的使用自己下载的bootstrap使用Notepad++打开发现没 ...
Bootstrap3基础 glyphicon 设置图标的颜色与大小
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
bootstrap4.0图标使用_Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案
bootrap3是支持的图标 ,4不支持 4已经移除了收费图标,取而代之建议使用其他的,比如 https://octicons.github.com/ 和http://fontawesome.io/ ...
css3图标一直旋转样式,css3 – 问题使Bootstrap3图标旋转
灵感来自 Fontawesome,我试图使一个旋转图标与bootstrap3.它很容易通过CSS3转换和转换实现.问题是图标不围绕中心旋转.它在旋转时摆动. 代码粘贴在下面.任何人知道是什么原因导致的 ...
bootstrap icon glyphicon
bootstrap2 图标用: <i class="icon-home" > 白色图标用 <i class="icon-home icon-white& ...
Bootstrap字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 1.字体图 ...
bootstrap中的glyphicon问题
在bootstrap中有自有包含一种字体图标glyphicon,基本能够满足大部分的UI要求.这里简单总结一下其使用方法. 官网给出的使用要求如下: 1. 图标类不能和其它组件直接联合使用.它们不能在 ...

BootStrap3 图标glyphicon

目录

官方地址

glyphicons官方地址

基类

说明

用法

整体代码

BootStrap3 图标glyphicon相关推荐

最新文章

热门文章