1

I'm try to create a circle border around a font-aweseome icon like the following ...

enter image description here

This is my mark up:

<div class="col-md-4 text-center service-section">
    <div class="icon-border">
      <font-awesome-icon icon="laptop" size="3x"/>
    </div>
    <h4 class="mt-4">Blah Blah</h4>
    <p class="mt-3">
      Donec viverra, libero sit amet consectetur porta, massa velit tempus
      sapien.
    </p>
  </div>

I have added a div to the outside of the icon and also tried applying a div to the icon component but no success.

japes Sophey
  • 487
  • 3
  • 8
  • 26

2 Answers2

1

This can be done by adding a few lines in CSS like this:

.icon-border {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid red;
}
Moayad .AlMoghrabi
  • 1,249
  • 1
  • 11
  • 18
0

Add this class directly to your icon

.circle-icon {
  border: 2px solid pink;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}
Hedgybeats
  • 297
  • 1
  • 4
  • 16