bootstrap3-Glyphicons 图标

本文主要是介绍bootstrap3-Glyphicons 图标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这篇关于bootstrap3-Glyphicons 图标的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！