Make Font Awesome icons in a circle?

Question

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?

score 273 · Answer 1 · edited Jan 26 '23 at 14:46

273

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

edited Jan 26 '23 at 14:46

jaredbaszler

3,941
2
32
40

answered Jun 17 '14 at 13:02

Sampat Badhe

8,710
7
33
49

7

The stacked icons only work up till 2x. If you want larger than that, it doesn't work – J Lee Sep 29 '14 at 20:01
@JLee I have added Fiddle for larger icons. see this for larger icons http://fortawesome.github.io/Font-Awesome/examples/#larger – Sampat Badhe Oct 12 '14 at 09:31
16

wish this was the accepted answer, its the "correct" way to do this with fontawesome. Accepted answer is a hack that does not adjust well. – Will Bowman Nov 29 '14 at 15:42
5

Same with numbers ` ` – m3nda Jan 06 '15 at 07:59
@gcphost you are right but also this way is not the precise way either. – atilkan Mar 02 '15 at 14:21
2

@emrah - its the only option here that is truely fontawesome, not custom css, so its more precise then anything here. – Will Bowman Mar 06 '16 at 22:20
1

problem for this stacked icon, you cant put a background on circle, – mmativ Apr 12 '16 at 09:34
1

Very elegant solution. @mmativ if you mean a background color on the circle you simply do – J.Kirk. Jan 14 '18 at 17:33
for FontAwesome 5.2 try: – qu1ckdry Aug 26 '18 at 15:46
@SampatBadhe I'm using v5.8.1 of font awesome. This doesn't work. Am I missing something? – Mike Apr 06 '19 at 17:39
@Mike Can you please create Fiddle so that I can look into it. classes might be different in newer versions. ` ` can you check with this snippet posted by @qu1ckdry – Sampat Badhe Apr 07 '19 at 05:18
How would you do this with react font-awesome? – Sam Jun 05 '20 at 21:32
1

https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native Could you look into this? – Oct 08 '20 at 20:48
1

YOU DA MAN! Elegant solution. This is how it was meant to be. – Bilaal Abdel Hassan Feb 22 '22 at 19:07

Nico O · Accepted Answer · 2021-12-15T20:13:33.353

212

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/

edited Dec 15 '21 at 20:13

answered Feb 20 '14 at 11:29

Nico O

13,762
9
54
69

7

Got sometning, but not round circle? – Schneider Feb 20 '14 at 12:02
The `border-radius` should round the element. What brower do you use? will updated my answer with prefixes – Nico O Feb 20 '14 at 12:03
4

But this is not a solution. This only works if the `i` has content. Usually with FA you don't have content within the i-tag, but the icon is rendered by CSS later: `` and this is what @Schneider actually asked for. – Jan Nov 09 '14 at 00:09
@Jan I will investigate in that tomorrow. But i can not see a Problem. You are Right, that the tags don't have content, but the content will be added via css. Even when the Icon would fail to load, you would see an circle. Can you make a jsFiddle of a Problem you see with the answer? – Nico O Nov 09 '14 at 09:15
Here you can see it in action:http://fiddle.jshell.net/4LqeN/275/ you will still Need to alter the line height and padding, but it Works. Your concern is not valid and the answer is correct. – Nico O Nov 09 '14 at 10:00
does not scale right with the fontawesome size because you define a static radius when the icon is dynamic size, my test shows a fa-lg being in an oval, not a circle. – Will Bowman Nov 29 '14 at 15:43
4

No. This is the answer to the question. See the images of the question. There is a shadow, not a hard circle. – Nico O Sep 04 '15 at 15:28
I will just add, to have a perfect circle, use 50% value of border radius :) – Pavel Hasala Jul 19 '17 at 09:22
Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:47

score 47 · Answer 3 · edited Sep 13 '19 at 12:56

47

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:)

edited Sep 13 '19 at 12:56

Community

1
1

answered Dec 21 '16 at 18:06

Vasyl Gutnyk

4,813
2
34
37

3

Sampat Badhe has told in his answer the same more than 2 years ago. Why dont you read other answers before writing yours? – Taras Yaremkiv Aug 30 '17 at 09:47
hey, sorry for Sampat, i didn't see him answer, i'll try to modify my answer and add more solutions or helpful info. – Vasyl Gutnyk Aug 30 '17 at 18:25
1

It is a good solution, but it gives a blue background to each of the icon. Any work around ? – Jamshaid K. Oct 01 '17 at 17:05
@CodeIt Just use css to clear it or add new background color. It shouldn't be a problem. – Vasyl Gutnyk Oct 02 '17 at 09:03
Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:48

Dave Everitt · Answer 4 · 2020-05-31T15:48:10.490

34

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 */
}

edited May 31 '20 at 15:48

answered Oct 02 '14 at 17:12

Dave Everitt

17,193
6
67
97

Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:48

atilkan · Answer 5 · 2021-12-21T02:48:01.033

15

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.

edited Dec 21 '21 at 02:48

answered Mar 02 '15 at 14:39

atilkan

4,527
1
30
35

adding text-align:center; Makes it work with pretty much everything even fa-info – Marcio Mar 30 '15 at 10:04
how about vertical align? – atilkan Mar 30 '15 at 12:44
Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:48

score 10 · Answer 6 · answered Jun 10 '14 at 18:13

10

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

answered Jun 10 '14 at 18:13

Ian Blair

109
1
2

nclsvh · Answer 7 · 2018-03-07T13:33:45.177

10

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

edited Mar 07 '18 at 13:33

answered May 24 '16 at 08:17

nclsvh

2,628
5
30
52

This ist a very nice and clean and small one! Heres a fiddle with CSS instead of SCSS https://jsfiddle.net/bqtkmy0s/ – summsel Jun 15 '18 at 09:20
@summsel isn't this the **exact** same thing as my original answer? You just wrote the code in scss and not css. – nclsvh Jun 18 '18 at 09:47
yes, of course it is. I tried your solution in css and there are plenty of people out there prefering css. So why not post the jsfiddle of this css-version. – summsel Jul 20 '18 at 23:39
Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:49
1

This is easiest solution and should have been accepted answer, as this doesn't need to add new elements as shown in accepted or highest voted answer. This answer follow KISS technique very well. – vikramvi Jul 12 '22 at 16:30

score 7 · Answer 8 · answered Apr 12 '16 at 09:41

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>

Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native — , Oct 08 '20 at 20:49

score 4 · Answer 9 · answered Mar 11 '15 at 12:09

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

score 3 · Answer 10 · answered Aug 27 '15 at 00:54

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

score 2 · Answer 11 · answered May 24 '16 at 11:31

2

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>

answered May 24 '16 at 11:31

TSlegaitis

1,231
15
29

Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:49

score 2 · Answer 12 · edited Nov 20 '19 at 20:19

2

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

edited Nov 20 '19 at 20:19

Jude Obiejesi

86
1
15

answered Jan 12 '19 at 11:19

newbdeveloper

394
3
11

Could you look into this? https://stackoverflow.com/questions/64270359/circle-outline-for-fontawesome-icons-in-react-native – Oct 08 '20 at 20:50

score 0 · Answer 13 · answered Jun 06 '19 at 14:33

0

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

answered Jun 06 '19 at 14:33

Oznog

23
5

The line-height was solving it for me – mecograph Jul 29 '19 at 08:14
Adding `!important` is a band-aid, not a solution. It means you have another CSS property somewhere else overriding your property. – TylerH Nov 20 '19 at 20:21

score 0 · Answer 14 · answered May 28 '20 at 08:24

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

score 0 · Answer 15 · answered Apr 24 '23 at 19:14

0

You can just use this CSS class -

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

This will get your work done

answered Apr 24 '23 at 19:14

Kartik singh Bisht

1

Make Font Awesome icons in a circle?

15 Answers15

Font icon in a circle using `em` as the base measurement

Linked

Related

Make Font Awesome icons in a circle?

15 Answers15

Font icon in a circle using em as the base measurement

Linked

Related

Font icon in a circle using `em` as the base measurement