Font awesome borders
<p>I'm trying to add a border to my font awesome icons like the picture below: 
<a href="https://i.stack.imgur.com/BhgK1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BhgK1.png" alt="enter image description here"></a></p>

<p>Yes i managed to do it, but this is not the right way to go I'll explain you why after you see my code: </p>

<p>Html:</p>

<pre><code>        &lt;div id= "contact"&gt;


        &lt;i class="fa fa-envelope-o fa-2x"&gt;&lt;/i&gt;
        &lt;i class="fa fa-phone fa-2x"&gt;&lt;/i&gt;

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

<p>And the CSS: </p>

<pre><code>/*font awesome*/

i.fa-envelope-o {
  width:50px;
  height:50px;
   display: inline-block;
   border:2px solid white;
  border-radius: 60px;

}
.fa-envelope-o {

  padding-top: 5px;
}

i.fa-phone {
  width:50px;
  height:50px;
   display: inline-block;
   border:2px solid white;
  border-radius: 60px;

}

.fa-phone {

  padding-top: 5px;
}
</code></pre>

<p>As you can see this is not the right way, what if i have to use the envelope icon once again but without a border? And to center it i had to use padding top. Is there a cleaner way to do this? I don't want to use the i tag alone, since the text above uses it aswel for, for example: </p>

<p><code>&lt;p&gt;&lt;i&gt;hello&lt;/i&gt;&lt;/p&gt;</code></p>

<p>Thanks in advance,
Kevin</p>