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   lt i class  quot fa fa-lock quot  gt  lt  i gt   Is it possible to all icon always be in round circle with border  Something like this  I have a picture   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

User · Answer

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      lt a href     gt  lt i class  fa fa-facebook fa-lg  gt  lt  i gt  lt  a gt

User · Answer

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  amp  line-height

User · Answer

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   lt div class  sosial-links  gt       lt a href     gt  lt i class  fa fa-facebook fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-twitter fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-google-plus fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-pinterest fa-lg  gt  lt  i gt  lt  a gt   lt  div gt    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      Have Fun

User · Answer

You can simply get round icon using this code    lt a class  facebook-share-button social-icons  href     target   blank  gt       lt i class  fab fa-facebook socialicons  gt  lt  i gt   lt  a gt    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

User · Answer

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   lt span class  fa-stack fa-lg  gt     lt i class  fa fa-circle fa-stack-2x  gt  lt  i gt     lt i class  fa fa-flag fa-stack-1x fa-inverse  gt  lt  i gt   lt  span gt       And we have now facebook icon inside circle

User · Answer

x000D   x000D  i fa   x000D    display  inline-block  x000D    border-radius  60px  x000D    box-shadow  0px 0px 2px  888  x000D    padding  0 5em 0 6em  x000D   x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet    gt  x000D   lt i class  fa fa-wrench  gt  lt  i gt  x000D   x000D   x000D     JsFiddle of old answer  http   fiddle jshell net 4LqeN

User · Answer

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

User · Answer

The below example didnt quite work for me this is the version that i made work   HTML    lt div class  social-links  gt       lt a href     gt  lt i class  fa fa-facebook fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-twitter fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-google-plus fa-lg  gt  lt  i gt  lt  a gt       lt a href     gt  lt i class  fa fa-pinterest fa-lg  gt  lt  i gt  lt  a gt   lt  div gt    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

User · Answer

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    lt div class  wrapper  gt     lt i class  icon fa fa-bars  gt  lt  i gt   lt  div gt    and some sass like this    wrapper    display  table      i      display  table-cell      vertical-align  middle      text-align  center           or see this JS Fiddle

User · Answer

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    x000D   x000D   social-links a  x000D    text-align center  x000D   float  left  x000D   width  36px  x000D   height  36px  x000D   border  2px solid  909090  x000D   border-radius  100   x000D   margin-right  7px    space between   x000D      display  flex  x000D      align-items  flex-start  x000D      transition  all 0 4s  x000D      -webkit-transition  all 0 4s  x000D     x000D   social-links a i  x000D   font-size  20px  x000D      align-self center  x000D   color   909090  x000D      transition  all 0 4s  x000D      -webkit-transition  all 0 4s  x000D      margin  0 auto  x000D    x000D   social-links a i  before  x000D    display inline-block  x000D    text-decoration none  x000D    x000D   social-links a hover  x000D    background  rgba 0 0 0 0 2   x000D    x000D   social-links a hover i  x000D    color  fff  x000D    x000D   lt link href  http   maxcdn bootstrapcdn com font-awesome 4 2 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   lt div class  social-links  gt  x000D       lt a href     gt  lt i class  fa fa-facebook fa-lg  gt  lt  i gt  lt  a gt  x000D       lt a href     gt  lt i class  fa fa-twitter fa-lg  gt  lt  i gt  lt  a gt  x000D       lt a href     gt  lt i class  fa fa-google-plus fa-lg  gt  lt  i gt  lt  a gt  x000D       lt a href     gt  lt i class  fa fa-pinterest fa-lg  gt  lt  i gt  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

With Font Awesome you can easily use stacked icons like this    lt span class  fa-stack fa-2x  gt     lt i class  fas fa-circle-thin fa-stack-2x  gt  lt  i gt     lt i class  fas fa-lock fa-stack-1x fa-inverse  gt  lt  i gt   lt  span gt    refer Font Awesome Stacked Icons  Update -  Fiddle for stacked icons

User · Answer

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

User · Answer

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

User · Answer

try this  HTML    lt div class  icon-2x-circle  gt  lt i class  fa fa-check fa-2x  gt  lt  i gt  lt  div gt    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

[css] Make Font Awesome icons in a circle?

Examples related to css

Examples related to font-awesome