bootstrap调整Glyphicons图标大小

站长手记 作者: 2024-08-27 18:45:01
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>

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69695.html