Font Icons are becoming more and more popular because of a number of benefits.
在网页中使用字体图标，既形象又好看。
图标查询地址：
http://www.w3resource.com/twitter-bootstrap/3/glyph-customization.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 自定义的CSS，用来覆盖Bootstrap的一些样式 -->
<link href="../../bootstrap-3.0.0/dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- 使用glyphicon图标 -->
<!-- 默认样式 -->
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
<!-- 设置大小 -->
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
<!-- 设置颜色 -->
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
<!-- 设置阴影效果 -->
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> 用户
</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 自定义样式 -->
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<!-- 导航上应用Glyphicons -->
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<!-- 使用container封装,左右边距都设置为0，消除不同浏览器的不一致性 -->
<div class="container">
<!-- 导航名称 -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<!-- 导航项 -->
<div class="collapse navbar-collapse">
<!-- ul无序列表封装导航项 -->
<ul class="nav navbar-nav">
<!-- 使用激活样式 -->
<li class="active">
<a href="#">
<!-- 图标 -->
<span class="glyphicon glyphicon-home">Home</span>
</a>
</li>
<li>
<a href="#">
<!-- 图标 -->
<span class="glyphicon glyphicon-shopping-cart">Shop</span>
</a>
</li>
<li>
<a href="#">
<!-- 图标 -->
<span class="glyphicon glyphicon-headphones">Support</span>
</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
相关推荐
完成以上步骤后，Bootstrap Glyphicons图标应该能在`bootstrap-select.js`插件以及其他使用到的地方正确显示。请注意，随着技术的发展，Bootstrap的后续版本可能会弃用某些特性，因此保持框架和插件的更新是确保项目...
Icon Picker 是一个基于 Bootstrap 和 Glyphicons 图标库的 jQuery 插件，用于在网页中方便地选择和显示图标。这个工具极大地简化了用户界面中图标选取的过程，为开发者提供了直观的图形化选择方式。 Bootstrap 是...
Bootstrap Glyphicons 是一个广泛使用的图标库，它与流行的前端框架 Bootstrap 搭配使用，为开发者提供了大量的矢量图标。这些图标可用于网站的各种元素，如按钮、导航菜单、表单等，以增强用户界面的视觉效果。...
6. **字体图标**：Bootstrap包含了Glyphicons图标集，这些矢量图标可以在任何分辨率下清晰显示，并且易于使用，只需要将图标类添加到`<i>`或`<span>`标签中。 7. **可访问性**：Bootstrap考虑到了网站的可访问性，...
在Bootstrap 3中，Glyphicons是内置的图标集，提供了一系列矢量图标供开发者使用。然而，Bootstrap 4移除了对Glyphicons的支持，转而推荐使用更强大的Font Awesome图标库。但这并不意味着在Bootstrap 4中不能使用...
3. **字体图标**：Bootstrap包含了 Glyphicons 和 Font Awesome 字体图标库，提供了一系列矢量图标，可轻松集成到项目中，为界面增添视觉吸引力。 4. **网格系统**：Bootstrap的网格系统允许开发者创建响应式的布局...
7. **字体和图标**：Bootstrap 3引入了Glyphicons图标集，一个包含数百个矢量图标的库，以及对Google Fonts的支持，使页面的视觉元素更加丰富。 8. **文档和支持**：Bootstrap 3有详尽的官方文档，包括示例、API...
bootstrap 图标显示需要的5个字体文件glyphicons-halflings-regular @font-face { font-family: 'Glyphicons Halflings'; src: url('../common/css/fonts/glyphicons-halflings-regular.eot'); src: url('../...
3. **字体图标**：`fonts`目录中，有`glyphicons-halflings-regular.eot`、`.svg`、`.ttf`、`.woff`和`.woff2`文件，这些都是 Glyphicons 字体图标集，Bootstrap 3 包含了一套基础的矢量图标，可用于页面元素装饰。...
4. **字体图标**：Bootstrap 4使用了Glyphicons图标集的替代品——Font Awesome，它提供了一套丰富的矢量图标，可以很容易地与Bootstrap的其他组件结合使用。 5. **LESS和SASS**：虽然不在压缩包内，但Bootstrap 4...
3. **LESS**：Bootstrap的源码基于LESS预处理器编写，允许开发者更灵活地自定义和扩展Bootstrap样式。如果你需要深度定制Bootstrap，可以修改LESS文件然后编译成CSS。 4. **Font Awesome**：Bootstrap图标通常来自...
- `fonts`目录包含了 Glyphicons 字体图标集，这是Bootstrap 3中默认的图标库。它提供了一套矢量图形图标，如箭头、警告符号、媒体播放控制等，可以直接在HTML中通过类名引用。例如，`glyphicon glyphicon-chevron-...
7. **图标**：包括Glyphicons图标集，可增强页面的视觉效果。 8. **表格**：虽然描述中提到没有table样式，但通常Bootstrap3仍然提供基本的表格样式，如striped、bordered、hover和condensed等。 9. **响应式设计*...
3. `fonts/` - 字体图标，如Glyphicons Halflings。 4. `img/` - 可能包含一些默认的图片资源。 5. `less/` 和 `scss/` - Bootstrap的源码文件，分别对应LESS和SASS版本。 在使用Bootstrap时，通常需要在HTML文档中...
Bootstrap Glyphicons是Bootstrap框架中内置的一种图标库，它包含了...但在Bootstrap 3版本中，Glyphicons是其图标解决方案的重要部分，对于那些仍在使用Bootstrap 3的项目，掌握Glyphicons的使用方法仍然是必要的。
3. 图标字体：`fonts/glyphicons-halflings-regular.eot`, `.svg`, `.ttf`, `.woff`, `.woff2` 这些文件是 Glyphicons 图标集，Bootstrap 3中包含的一套矢量图标，可用于按钮、链接、导航等元素。 4. HTML 示例文件...
5. **字体与图标**：Bootstrap 4默认使用Google的Open Sans字体，同时引入了Glyphicons图标库的替代品——Font Awesome图标集，提供了更多、更现代的图标选择。 6. **改进的表单控件**：表单元素如输入框、选择框和...
Bootstrap 字体图标(Glyphicons) @font-face { font-family:’Glyphicons Halflings’;src:url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//maxcdn....
- Fonts目录：存放了 Glyphicons 图标字体文件，用于Bootstrap中的图标显示。 - Images目录（如果有的话）：可能包含一些示例图片或者框架需要的图像资源。 - Documentation目录：可能包含HTML格式的框架文档，帮助...