title: Font Awesome Borders in CSS
body: <p>I'm in the process of doing a redesign of my site. Maybe someone could be so kind to shed some light on an issue I am having.</p>
  
  <p>Below is a mock up of what I'm trying to do. I am using font awesome to create icons and would like to put a border round each icon.</p>
  
  <p><img src="https://i.stack.imgur.com/oaddH.jpg" alt="mockup"></p>
  
  <p>I have tranlated the mock-up into the following HTML code</p>
  
  <pre><code>&lt;div class="col-md-4"&gt;
  
          &lt;p class="servicesFont borderSer"&gt;&amp;#xf108;&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
  
          &lt;p class="servicesFont borderSer"&gt;&amp;#xf1ea;&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
  
          &lt;p class="servicesFont borderSer"&gt;&amp;#xf040;&lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>And CSS</p>
  
  <pre><code>.servicesFont{
  font-family: FontAwesome;
  color: #3397d3;
  font-size: 90px;
  font-weight: 400;
  display:inline-block;
  }
  .borderSer{
      border-radius: 50%;
      border-width: .25em;
      border-color: #885fa8;
      border-style: dashed;
      display:inline-block;
      }   
  </code></pre>
  
  <p>With this code I am getting the following results;</p>
  
  <p><img src="https://i.stack.imgur.com/x3M28.jpg" alt="HTML"></p>
  
  <p>I am not using the font awesome classes as I was having issues specifying sizes using that method. Maybe I should do it with the classes?</p>
  
  <p>I would greatly appreciate it if someone could give me an idea on now to best implement that icons on the mock-up.</p>