码上敲享录 > bootstrap简单例子分享 > bootstrap调整Glyphicons图标大小

bootstrap调整Glyphicons图标大小

上一章章节目录下一章 2018-08-04已有14868人阅读 评论(0)

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.yayihouse.com/yayishuwu/chapter/1408


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
1

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交