Question

对不起家伙只是一个简单的问题，有一个图标，想知道如何在引导程序中做大。

html：

<div class="square1">
    <a href="#">
        <span class="glyphicon glyphicon-search"></span>
    </a>
</div>

希望让搜索更大的图标更大。

Answer 1

只需使用font-size属性。

.square1:hover{
  font-size:2em;  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="square1">
<a href="#">
  <span class="glyphicon glyphicon-search"></span>
</a>
</div>

Answer 2

div {
  margin: 1em;
  outline: 1px dotted red;
}

a {
  display: inline-block;
  padding: .5em;
  transition: transform .5s linear;
}

a:hover{
  transform: scale(2);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<div class="square1">
  <a href="#">
    <span class="glyphicon glyphicon-search"></span>
  </a><a href="#">
    <span class="glyphicon glyphicon-search"></span>
  </a><a href="#">
    <span class="glyphicon glyphicon-search"></span>
  </a>
</div>

Bootstrap如何使图标更大

2 个答案: