How to create square around glyphicon bootstrap?
<p>I want to create an icon like this:</p>

<p><a href="https://i.stack.imgur.com/THnPN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/THnPN.png" alt="http://i.stack.imgur.com/THnPN.png"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;span class="glyphicon glyphicon-plus" aria-hidden="true"&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>How to draw a square around this icon? Thanks.</p>

<p>Updated: seem add CSS my code is broken.</p>

<p>You can see it like:</p>

<p><a href="https://i.stack.imgur.com/pF2Pd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pF2Pd.png" alt=""></a></p>

<p>All  not show correct.</p>

<p>Updated code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span.glyphicon {
    background-color: #eee;
    border: 1px solid #000;
    border-radius: 8px;
    height: 50px !important;
    padding-top: 17px;
    text-align: center;
    width: 50px !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
  &lt;div class="panel panel-primary"&gt;
    &lt;div class="panel-heading active" role="tab" id="headingOne"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseThree"&gt;
          Example &lt;span class="glyphicon glyphicon-plus pull-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true"&gt;
      &lt;div class="panel-body"&gt;
        &lt;div class="list-group"&gt;

          &lt;form accept-charset="UTF-8" action="" method="post"&gt;

            &lt;select name="select_baogia" class="select_baogia"&gt;
              &lt;option value=""&gt;Tree 1&lt;/option&gt;
              &lt;option value=""&gt;Tree 2&lt;/option&gt;
              option
            &lt;/select&gt;
            &lt;input  name="name" placeholder="Name" type="text"&gt; 
            &lt;input  name="email" placeholder="Email" type="text"&gt;
            &lt;input class="text_baogia"  name="phone" placeholder="Phone num" type="text"&gt; 
            &lt;input name="diadiem" placeholder="Location" type="text"&gt; 
            &lt;button class="btn btn-warning" type="submit"&gt;Call back to me&lt;/button&gt;
          &lt;/form&gt;


        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>