bootstrap 字体图标

图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

image.png

glyphicon gyphicon-sort-by-attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 如何使用字形图标(Glyphicons)</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>

</body>
</html>

image.png

menu 字体图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏的字形图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>

</head>
<body>

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>
</ul>
</div>
</div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

image.png

<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>


image.png

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> User
</button>

字体图标参考:https://www.runoob.com/bootstrap/bootstrap-glyphicons.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习完整课程请移步 互联网 Java 全栈工程师 本节视频 【视频】使用 Bootstrap-Bootstrap ...
    撸帝阅读 1,031评论 0 1
  • 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见。使用代码如下...
    盗花阅读 6,792评论 0 1
  • # Awesome Python [![Awesome](https://cdn.rawgit.com/sindr...
    emily_007阅读 2,232评论 0 3
  • 今天妈妈带我去了姐姐的补课班,我感触很深,那些姐姐说的英语可好听了,回来的路上让妈妈也给我买了光盘,我一定坚持在家...
    张建发1阅读 234评论 0 0
  • 1. 问:择偶观不同如何选择? 答:发挥优势,遵循内心的喜好,对感情专一点。 2. 问:低成本,高享受的性爱活动为...
    旭凤呀阅读 299评论 4 0