Bootstrap 字体图标使用案例
图标有很多种用途,比如按钮组、按钮、导航、表单输入框中的小图标等。在任何需要的地方,你都可以使用这些图标来设计出漂亮的界面。
1、按钮组
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
效果如图 3‑63所示:
图3-63 按钮组中使用字体图标Glyphicons
2、按钮
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
效果如图 3‑64所示:
图3-64 按钮中使用字体图标Glyphicons
3、导航
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
效果如图 3‑65所示:
图3-65 导航菜单中使用字体图标Glyphicons
4、表单输入框
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
效果如图 3‑66所示:
图3-66 表单控件中使用字体图标Glyphicons
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 字体图标使用案例相关推荐
- 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字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- Bootstrap 字体图标(Glyphicons)
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 什么是字体图标? 字体图标是在 ...
- jsp中不能正常显示图片+不能正常显示bootstrap字体图标
一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...
- html语言中glyphicon,Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
- Bootstrap字体图标
Bootstrap提供了总共263种字体图标 可以满足大部分的图标需求 为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失 1.字体图 ...
最新文章
- R数据可视化 火山图
- Oracle Study--RAW Device在Oracle下的应用
- 读logback源码系列文章(五)——Appender --转载
- GitHub 五万星登顶,命令行的艺术!
- 数据结构基础:栈(Stack)
- [设计模式]抽象工厂模式
- 无人值守时代,运维如何保障发布质量?
- $ajax({}).done 和 $ajax({}) success 区别
- java 积分源码_Java生鲜电商平台-积分系统搭建与源代码下载?(小程序/APP)
- ipad鼠标圆圈变成箭头_下一代 macOS 或将支持 Mac「投屏」到 iPad
- php遍历memcache,php遍历memcache所有键值
- php字符串操作整理,PHP学习之整理字符串
- oracle12能卸干净吗,Oracle卸载干净方法
- GP数据库(三)杀进程
- Android发短信功能
- 为什么说程序员的前三年不要太看重工资水平?
- 哈希算法----猜词游戏
- MobileNet在手机端上的速度评测:iPhone 8 Plus竟不如iPhone 7 Plus
- android fresco 圆角,圆角和圆圈
- eclipse代码:1到100既是3又是5的倍数