Font Awesome Borders in CSS

Question

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.

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.

I have tranlated the mock-up into the following HTML code

<div class="col-md-4">

        <p class="servicesFont borderSer">&#xf108;</p>

    </div>
    <div class="col-md-4">

        <p class="servicesFont borderSer">&#xf1ea;</p>

    </div>
    <div class="col-md-4">

        <p class="servicesFont borderSer">&#xf040;</p>

    </div>

And CSS

.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;
    }   

With this code I am getting the following results;

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?

I would greatly appreciate it if someone could give me an idea on now to best implement that icons on the mock-up.

Answer 1

Since height and width of the icon are not of same pixel. You can get the border to not clearly circle. For that you can manage by:

1)Giving more padding to the parent element's left and right side if your icon has more height than width and vice versa. 2) Since you cannot apply height and width property to font icon you can make parent height and width equal like done in above answer.

Answer 2

You really should use the classes for both accessibility reasons and SEO. If you place the character codes directly in your markup a screen reader will read out "&-#-x-f-1-0-8-;", which obviously will be confusing and non-sensical to someone who isn't sighted. Moreover, you have the character codes in your markup and wrapped in a p tag, so you're telling search engines that those codes are content.

Here's one way to correctly use the classes instead:

.services {
  padding-top: 2em;
  padding-bottom: 2em;
}
.services i, .services h4 {
  text-align: center;
}
.fa.services-icon {
  color: #3397d3;
  height: 180px;
  width: 180px;
  font-size: 90px;
  line-height: 180px;
  margin: auto;
  display: block;
}
.services-icon:after {
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 180px;
  border-radius: 50%;
  border-width: .25em;
  border-color: #885fa8;
  border-style: dashed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="row services">
    <div class="col-sm-4">
      <i class="fa fa-desktop services-icon"></i>
      <h4>Web</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a nisi ac neque interdum pharetra sit amet in tortor. Curabitur sit amet nisi non felis sodales placerat non quis urna. Proin eget metus dui. Vestibulum finibus justo vel erat volutpat bibendum. Donec pretium tortor eget dui efficitur, in dapibus lorem lobortis.</p>
    </div>
    <div class="col-sm-4">
      <i class="fa fa-newspaper-o services-icon"></i>
      <h4>Print</h4>
      <p>Curabitur aliquet lacus nec leo iaculis, in luctus velit finibus. Donec pharetra rutrum orci malesuada dapibus. Vivamus sit amet bibendum lectus. Nulla sagittis dolor quis odio suscipit, sed euismod lorem euismod. Donec dapibus vitae libero faucibus bibendum. Duis aliquet nisi a ligula hendrerit, a ullamcorper tellus tincidunt.</p>
    </div>
    <div class="col-sm-4">
      <i class="fa fa-pencil services-icon"></i>
      <h4>Branding</h4>
      <p>Nam tempus luctus laoreet. Cras at massa sapien. Vivamus eu rhoncus sapien, ac molestie urna. Suspendisse malesuada ligula vitae augue sodales finibus. Vestibulum porttitor sed elit ac vestibulum. In feugiat ipsum sed elit consequat, id vehicula odio pellentesque. Proin sit amet dictum velit. Etiam sit amet lorem quis leo laoreet pellentesque.</p>
    </div>
  </div>
</div>

Answer 3

Thank you ckuijjer. Below is the result from adding a fixed with span element.

HTML

   <span class="width borderSer">
                <p class="servicesFont ">&#xf108;</p>
                </span>

CSS

.servicesFont{
    font-family: FontAwesome;
    color: #3397d3;
    font-size: 90px;
    font-weight: 400;
    display:inline-block;
    padding:20px;
    }
.borderSer{
    border-radius: 50%;
    border-width: 25px;
    border-color: #885fa8;
    border-style: dashed;
    display:inline-block;
    text-align:center;
    }   
.width{
width:200px;
height:200px;   
    }

Result

If anyone could give me any suggestions on how to do this better it would be greatly appreciated.

Thanks