Bootstrap 图标
Bootstrap 图标由 Glyphicons 提供。详情可以去bootstrap官网进行查看。
用法:
<i class="icon_class_name"></i>
实例:一个搜索表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using icons in search form - Bootstrap version 2.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of using icons in search form - Bootstrap version 2.0 from w3cschool.cc">
<meta name="author" content=""> <!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
form {
margin-top: 50px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn"><i class="icon-search"></i> Search</button>
</form>
</div>
</div>
<footer>
<p>© Company 2013</p>
</footer>
</div>
</body>
</html>
效果:
实例:在导航中使用图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example icons in navigation with Bootstrap version 2.0 from w3cschool.cc</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example icons in navigation with Bootstrap version 2.0 from w3cschool.cc">
<meta name="author" content=""> <!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head> <body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">w3cschool</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#"><i class="icon-user icon-white"></i> Home</a></li>
<li><a href="#about"><i class="icon-user icon-white"></i> User</a></li>
<li><a href="#about"><i class="icon-download icon-white"></i> Downlaod</a></li>
<li><a href="#about"><i class="icon-upload icon-white"></i> Upload</a></li>
<li><a href="#about"><i class="icon-play-circle icon-white"></i> Play Circle</a></li>
<li><a href="#about"><i class="icon-bookmark icon-white"></i> Bookmark</a></li>
<li><a href="#about"><i class="icon-gift icon-white"></i> Gift</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div> <hr>
</div> <!-- /container --> <!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script> </body>
</html>
效果如下:
实例:在按钮和按钮组中使用图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using icons in buttons and button groups - Bootstrap version 2.0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of using icons in buttons and button groups - Bootstrap version 2.0 from w3cschool.cc">
<meta name="author" content=""> <!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
form {
margin-top: 50px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="btn-toolbar" style="margin-bottom: 9px">
<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 class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
</p>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
效果如下:
Bootstrap 图标的更多相关文章
- firefox浏览器无法显示bootstrap图标问题总结
在学习bootstrap的时候,有一个问题始终非常疑惑和困扰,就是firefox无法显示bootstrap自带的那套名为“glyphicon”的图标,在图标的引用处显示的是一个小方块,如图所示(4前面 ...
- 基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理
在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...
- 基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...
- 第二百三十七节,Bootstrap图标菜单按钮组件
Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
http://www.cnblogs.com/wuhuacong/p/4762924.html 在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模 ...
- Bootstrap 图标菜单按钮组件
---恢复内容开始--- 一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/componen ...
- bootstrap图标字体不出来问题的解决办法
@font-face { font-family: 'Glyphicons Halflings'; src: url('/Scripts/bootstrap/fonts/glyphicons-half ...
- bootstrap图标乱码问题-解决方案
楼主在使用bootstrap时,出现了图标乱码问题,经过多次查找,才解决了问题(最后发现真的是很好解决的问题(^^)) 如果出现乱码 请直接在自己写的CSS中重新引入一下font文件中的字体就好了 @ ...
- firefox(ff)下无法显示bootstrap图标问题的解决方案(转)
原文链接: http://www.th7.cn/web/html-css/201502/82548.shtml 后在网上搜到了解决方案,在此分享以供各位遇到问题的同好参考:在ff的地址栏中输入“abo ...
随机推荐
- java缓存技术(转)
最近在做java缓存,了解了一下.以下仅是对map对方式讨论.没有对点阵图阵讨论.作缓存要做以下2点: 1:清理及更新缓存时机的处理: . 虚拟机内存不足,清理缓存 .. 缓存时间超时,或访问 ...
- Arcgis sde 10.1您不能创建在安装后的空间库,提示User has privileges required to create database objects.
Geodatabase在10.1版本号也有较大的改进和更新,在用户体验和性能上都有变化,在实际的工作中可能会碰到各种奇怪的问题(事实上都是有原因的,须要我们对其工作机制有所了解才干避免其发生):近期须 ...
- java 不寻常的问题 No bean named 'sessionFactory' is defined 和 initialize a collection of role
左右java的"No bean named 'sessionFactory' is defined " 现在经常出去SHH或在其框架内Sping+JPA使用底部HIbernate ...
- java线 生产者和消费者
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhbmdydWkxOTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- H264 编解码器架构简单
看完后H264/AVC 编解码器演示,头脑是刚刚离开以下三个: 1.H264并且不明白如何指定的编解码器来实现,仅定义了一个编码视频位流的语法.和比特流进行解码,这与MPEG 类似. 2.H264而一 ...
- 华为G520联通版刷机包 基于MIUI CM11新 平稳 稳定
ROM介绍 刷先配置双卡:"设定-安卓原生设置-双卡套-配置订阅",否则,无信号 使开发人员选项方法:"设定-安卓原生设置-关于手机-发布"连续点击版本 启用A ...
- jquery.validate1.13
jquery.validate新的写法(jquery.validate1.13.js) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 【转】细说 Form (表单)
阅读目录 开始 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Aj ...
- linux_操作基本语句
总结一下常用的和不常用的linux命令,有些命令不常用的,是要反复去看才能记住的. 1.最基础的ls命令,相当于win下的dir命令,常用参数有 -a,-l 2.cd命令,cd到一个目录,跟win下的 ...
- obj-c编程15[Cocoa实例03]:MVC以及归档化演示样例
前面的博文里介绍了归档和解档,这里我们把它实际应用到一个简单的代码中去,将它作为一个多文档应用程序的打开和保存的背后支持.另外这里介绍一下MVC思想,这个在不论什么语言里都会有,它是一种设计思想,主要 ...