CODEWITHSUNDEEP
cssfont-awesome
Deepak
Deepak

Reputation: 1068

FontAwesome icon with a circle

I am trying to create fontawesome icons within a circle and I have used border css for the same to achieve. However, for different font icons, the border is not circular, it changes it's shape for some of the icons like facebook.

I have following code snippet, in which facebook border isn't circular. Can you kindly let me know how to achieve circular (exact circle) border for all icons, irrespective of their sizes (event twitter and server icons aren't looking like uniform circles)?

https://jsfiddle.net/1d7fvLy5/1/

i.fa {
  margin: 0.5em;
  font-size: 4em;
  color: #303030;
  border: 2px solid #303030;
  border-radius: 50%;
  padding: 0.5em;
  transition: all .5s ease;
}

i.fa:hover{
  color:lightblue;
   border: 2px solid lightblue;
  cursor:pointer;
}

Upvotes: 0

Views: 8996

Answers (4)

Hamid.r Fahimi
Hamid.r Fahimi

Reputation: 21

Try this way:

HTML

<a class="align-items-center justify-content-center border d-flex roundbutton shadow text-decoration-none" href="#">
<i class="fab fa-facebook-f fa-2x fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>

CSS:

    .roundbutton {
    display: block;
    height: 4vw;
    width: 4vw;
    border-radius: 50%;
    border: 1px solid red;

}

.socialSignInBtns:hover {
    opacity: 0.7;
}

Upvotes: 0

Palash Karia
Palash Karia

Reputation: 710

If you want, you can use fontAwesome's stacking icons feature, like this:

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

Here's a fiddle: https://jsfiddle.net/1d7fvLy5/2/

And here's the examples page for fontAwesome http://fontawesome.io/examples

Upvotes: 3

user4676340
user4676340

Reputation:

To make a perfect circle, you only need to have a square and not a rectangle.

This means that your height must be equal to your width.

Try this class : 

i.fa {
  margin: 0.5em;
  font-size: 4em;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  color: #303030;
  border: 2px solid #303030;
  border-radius: 50%;
  padding: 0.5em;
  transition: all .5s ease;
}

Upvotes: 0

Richard Yan
Richard Yan

Reputation: 1296

Adding width: 1em; and text-align: center; to i.fa should work.

Upvotes: 4

Related Questions