bootstrap调整Glyphicons图标大小
bootstrap调整Glyphicons图标大小
解决方法:
bootstrap中的图标,是用字体的形式表示的。所以,当你需要更改你的图标的大小的时候就很方便了,
只需要设置它的font-size就行了。
而且这样的好处是,不管你设多大或者多小,它都能正常展示。而不像图片会拉伸或者压缩。
这里注意要在head里加入
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" />
<head>
<title>bootstrap调整Glyphicons图标大小</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<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>
<span class="glyphicon glyphicon-picture" aria-hidden="true" style="color:blue;font-size:25px;"></span>
<span class="glyphicon glyphicon-search" aria-hidden="true" style="font-size: 25px;"></span>
</body>
</html>