bootstrap 使用图标

使用bootstrap的图标：

内联元素使用，且需要两个类：基本类、图标类，即可调用图标。

注意：需要设置padding，使图标与文本之间留有空地，更加美观；图标类不能与其他组件类联合使用。

图标使用时，基类为：glyphicon .

例子：

 <div><a href="#"><span class="glyphicon glyphicon-user"></span> user<span class="glyphicon glyphicon-envelope"></span> email</a></div>

导航栏样式

 <ul class="nav nav-pills"><li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页<span class="glyphicon glyphicon-pencil"></span> 应用<span class="glyphicon glyphicon-book"></span> 图书</a></li></ul>

输入框

         <div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span><input type="text" class="form-control"></div>

bootstrap 使用图标相关推荐

Bootstrap 3: 图标转换事件 Change icons when toggle
代码: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css&q ...
Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...
Bootstrap 字体图标Glyphicons
Bootstrap 提供了一个图片精灵,其中包含 140 个图标,这些图标可用于按钮.链接.导航和表单等元素.这些图标由 Glyphicons(http://glyphicons.com/)提供.如图 ...
Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
很不错的两款Bootstrap Icon图标选择组件
这篇文章主要介绍了不容错过的两款Bootstrap Icon图标选择组件,支持自定义的图标,拿出来分享下,绝对的干货,感兴趣的小伙伴们可以参考一下一.Bootstrap icon picker组件 ...
bootstrap 文字图标 glyphicon class 不显示
关于bootstrap 文字图标不显示问题 @font-face的使用需要的文件(就是第二个 fonts) @font-face的使用自己下载的bootstrap使用Notepad++打开发现没 ...
html的小图标组件,JS组件系列之Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

bootstrap 使用图标

bootstrap 使用图标相关推荐

最新文章

热门文章