middle aligning icon-fonts inside css circles

Question

I am trying to middle align icons inside a circle. I am using icon fonts by font-awesome. My code is as follows

<ul>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
    <li><a href="#"><i class="icon-5x icon-camera"></i></a></li>
</ul>

CSS

ul {
  list-style: none;
}
ul li {
  display: inline-block;
  margin: 15px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
ul li a {
  font-size: 1em;
  color: #000;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
}

and also I tried

a {
 line-height: 100%;
 text-align: center;
}

But these approaches does not work.

Andrey Mikhaylov - lolmaus · Accepted Answer · 2020-12-14T07:18:03.133

10

Your solution is valid, you just need to move the width and height declarations into the a:

ul {
  list-style: none;
  
  li {
    display: inline-block;
    background-color: pink;
    margin: 15px;
    border-radius: 50%;
    
    a {
      color: #000;
      display: table-cell;
      vertical-align: middle; 
      text-align: center; 

      height: 100px;
      width: 100px;   
      
      &, &:hover, &:active {
        text-decoration: none;
      }
    }
  }
}

Result:

screenshot

edited Dec 14 '20 at 07:18

answered Jun 18 '13 at 10:37

Andrey Mikhaylov - lolmaus

23,107
6
84
133

3

The problem was that though the li element was large enough, the table cell inside it had unspecified width and thus remained small (adjusted its width based on content). – Andrey Mikhaylov - lolmaus Jun 18 '13 at 11:02
2

Just pinging to let author know link works as an Ad now – MoshMage Oct 24 '17 at 10:23

score 3 · Answer 2 · answered Jan 28 '16 at 01:09

You can do this with flexbox quite easily. That is my go to and then fallback to the above solution for browsers that don't support flexbox. Flexbox support is awesome these days especially with IE 8 9 & 10 going away.

The trick is to use justify-content: center to align the icon center in the circle and use align-items: center to vertically align the icon in the circle.

Check out this great resource on flexbox. See here for an example pen http://codepen.io/celsowhite/pen/pgVegE.

The HTML:

<ul class="social_links">
 <li><a href="" target="_blank">
   <i class="fa fa-envelope"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-twitter"></i>
 </a></li>
 <li><a href="" target="_blank">
   <i class="fa fa-facebook"></i>
 </a></li>
</ul>

The SCSS:

ul.social_links {
    display: block;
    padding: 20px 0px 0px;

    li {
        display: inline-block;
        font-size: 23px;
        padding: 0px 10px;

    }
}

ul.social_links i {
  background: black;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out;

  &:hover{
    background: #555555;
  }
}

score 2 · Answer 3 · answered Jul 15 '20 at 04:23

2

Use line-height property, that's best, I had same problem I used line-height and it's done. Example

   height:20px;
   width:20px;
   line-height:20px;

good to go

answered Jul 15 '20 at 04:23

User8587

21
2

score 1 · Answer 4 · answered Dec 15 '17 at 17:21

Example of list :

        <ul class="list-unstyled list-coordonne">
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
            <li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
        </ul>

CSS code to center icon in circle :

      .footer-text .fa-coordonne {
          color: white;
          background-color: #dad918;
          border-radius: 50%;
          font-size: 25px;
          width: 40px;
          height: 40px;
          text-align: center;
      }

      .footer-text .list-coordonne>li:first-child .fa-coordonne:before{
        content: '\f041';
        text-align: center;
          font-weight: 600;
          vertical-align: sub;
          z-index: 12;
      }

      .footer-text .list-coordonne>li:nth-child(2) .fa-coordonne:before{
        content: '\f003';
       text-align: center;
          font-weight: 600;
          vertical-align: sub;
          z-index: 12;
      }

      .footer-text .list-coordonne>li:last-child .fa-coordonne:before{
        content: '\f095';
      text-align: center;
          font-weight: 600;
          vertical-align: -webkit-baseline-middle;
          z-index: 12;
      }

score 0 · Answer 5 · answered Mar 25 '22 at 01:32

0

What I simply like to do is first set the height and width of the icon. Plop it in a div. Apply border radius of 50%(to get a circle) to the div. And give it a background-color(obviously). Set the display property of the div to "flex". justify-content: center and align-items: center. And there you go! Works out for me!

answered Mar 25 '22 at 01:32

Basit Obaid

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 25 '22 at 06:17

score -1 · Answer 6 · answered Jun 18 '13 at 10:08

-1

add this padding in 'li'

li{
padding:10px; //or anyvalue
}

or use specific padding

li{
padding-top:10px; //or any value
}

remember when you add padding value then the size would also increases, adjust and balance them.

answered Jun 18 '13 at 10:08

GAURAV MAHALE

1,032
10
18

you can also use padding-bottom, or padding-right or paddding-left – GAURAV MAHALE Jun 18 '13 at 10:10

middle aligning icon-fonts inside css circles

6 Answers6

Linked