H Vn Lc  BIT H Vn Lc BIT - 3 months ago 27
CSS Question

How to create square around glyphicon bootstrap?

I want to create an icon like this:

http://i.stack.imgur.com/THnPN.png



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>





How to draw square around this icon? Thanks.

Answer
  1. You can do with CSS:

span.glyphicon.glyphicon-plus {
    background-color: #eee;
    border: 1px solid #000;
    border-radius: 8px;
    height: 50px !important;
    padding-top: 17px;
    text-align: center;
    width: 50px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

  1. You can do as a button:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
<a class="btn btn-default" href="#" role="button"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a> or 
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>

Look the doc: http://getbootstrap.com/css/#buttons