CODEWITHSUNDEEP
cssfont-awesome
Schneider
Schneider

Reputation: 2496

Make Font Awesome icons in a circle?

I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:

<i class="fa fa-lock"></i>

Is it possible to all icon always be in round circle with border? Something like this, I have a picture:

enter image description here

Using

i {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  padding: 10px;
}

Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?

Upvotes: 169

Views: 437564

Answers (16)

Alaa Mekibes
Alaa Mekibes

Reputation: 1

I have faced this problem a lot even if you add a circle you will see that the icons have different sizes. So after searching and testing a get this:

i {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid;
    color: white;
    font-size: 20px;
}

I will explain the code :

  • display: inline-flex; : Use the flex box to center the icon.
  • width: 20px and height: 20px : used to Set the size of the circle.
  • border-radius: 50%; : makes a circle into the icon

I think others are clear.

Upvotes: 0

Kartik singh Bisht
Kartik singh Bisht

Reputation: 11

You can just use this CSS class -

.i{
    display: flex;
    padding: .5rem;
    background-color: #888;
    border-radius: 50%;
}

This will get your work done

Upvotes: 1

Sampat Badhe
Sampat Badhe

Reputation: 9075

With Font Awesome you can easily use stacked icons like this:

UPDATE: Font Awesome v6.2.1

<span class="fa-stack fa-2x">
  <i class="fa-thin fa-circle fa-stack-2x"></i>
  <i class="fa-solid fa-lock fa-stack-1x fa-inverse"></i>
</span>

UPDATE: Font Awesome v5.15.4

<span class="fa-stack fa-2x">
  <i class="fal fa-circle fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

refer Font Awesome Stacked Icons

Update:- Fiddle for stacked icons

Upvotes: 281

atilkan
atilkan

Reputation: 5018

Update: Rather use flex.

If you want precision this is the way to go.

Fiddle. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/

Here is the HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Here is the CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

NOTE: Don't use this anymore. Use flexbox.

Upvotes: 15

Nico O
Nico O

Reputation: 14102

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;

}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/

Upvotes: 215

Dave Everitt
Dave Everitt

Reputation: 17856

Font icon in a circle using em as the base measurement

if you use ems for the measurements, including line-height, font-size and border-radius, with text-align: center it makes things pretty solid:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Upvotes: 34

Armando Guarino
Armando Guarino

Reputation: 1621

This is the best and most precise solution I've found so far.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }

Upvotes: 0

newbdeveloper
newbdeveloper

Reputation: 394

You can simply get round icon using this code:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Now your CSS will be:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Upvotes: 2

Vasyl Gutnyk
Vasyl Gutnyk

Reputation: 5039

You don't need css or html tricks for it. Font Awesome has built in class for it - fa-circle To stack multiple icons together you can use fa-stack class on the parent div

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

//And we have now facebook icon inside circle:)

Upvotes: 48

Oznog
Oznog

Reputation: 33

I like Dave Everitt's answer with the « line-height » but it only works by specifying the « height » and then we have to add « !important » to line-height ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Upvotes: 0

nclsvh
nclsvh

Reputation: 2868

UPDATE:

Upon learning flex recently, there is a cleaner way (no tables and less css). Set the wrapper as display: flex; and to center it's children give it the properties align-items: center; for (vertical) and justify-content: center; (horizontal) centering.

See this updated JS Fiddle

Strange that nobody suggested this before.. I always use tables to do this.
Simply make a wrapper have display: table and center stuff inside it with text-align: center for horizontal and vertical-align: middle for vertical alignment.

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

and some sass like this 

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

or see this JS Fiddle

Upvotes: 10

TSlegaitis
TSlegaitis

Reputation: 1310

Font Awesome icons are inserted as a :before. Therefore you can style either your i or a like so: 

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Upvotes: 2

mmativ
mmativ

Reputation: 1414

This is the approach you don't need to use padding, just set the height and width for the a and let the flex handle with margin: 0 auto.

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Upvotes: 7

MaxineHu
MaxineHu

Reputation: 389

try this

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Upvotes: 3

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

The below example didnt quite work for me,this is the version that i made work!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

Upvotes: 4

Ian Blair
Ian Blair

Reputation: 109

You can also do this. I wanted to add a circle around my icomoon icons. Here is the code. 

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

Upvotes: 10

Related Questions