Rectangle 27 0

html How to center text vertically with a large font awesome icon?


.fa-2x {
  vertical-align: middle;
}
inline
inline-block
table-cell
vertical-align
vertical-align: middle

Add 3x, 4x, etc to the same definition as needed.

I use icons next to text 99% of the time so I made the change globally:

In my opinion this should be the accepted answer, as it is by far the simplest solution, unless I am missing something in the original question. Thanks @rushonerok! I'm not sure why some people say not to use vertical-align: middle; - I might be missing something here. Please explain if so.

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}
<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>
  • do not play with the vertical-align of your text
  • play with the vertical align of the font-awesome icon

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

I updated your jsfiddle for how I would do it. I used font-size for the icon instead of using the 2x. jsfiddle.net/3GMjp/1

If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following

In your first piece of code the <span> start tag does not correspond with the ending </i> tag.

Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.

yes, this is a better solution, thanks. Still seems to require line-height though jsfiddle.net/paulftw/F3KyK/41

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}
<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>
  • do not play with the vertical-align of your text
  • play with the vertical align of the font-awesome icon

I updated your jsfiddle for how I would do it. I used font-size for the icon instead of using the 2x. jsfiddle.net/3GMjp/1

If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following

In your first piece of code the <span> start tag does not correspond with the ending </i> tag.

Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.

yes, this is a better solution, thanks. Still seems to require line-height though jsfiddle.net/paulftw/F3KyK/41

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


.fa-2x {
  vertical-align: middle;
}
inline
inline-block
table-cell
vertical-align
vertical-align: middle

Add 3x, 4x, etc to the same definition as needed.

I use icons next to text 99% of the time so I made the change globally:

In my opinion this should be the accepted answer, as it is by far the simplest solution, unless I am missing something in the original question. Thanks @rushonerok! I'm not sure why some people say not to use vertical-align: middle; - I might be missing something here. Please explain if so.

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>
div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}

a flexbox option

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


i.fa {
  line-height: inherit;
}

Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


<div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>
div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

I see, setting line-height = container's height and floating things left works and needs less typing. Here's an updated fiddle with noise reduced: jsfiddle.net/F3KyK/7

I would wrap the text in a so you can target it separately. Now if you float both and left, you can use line-height to control the vertical spacing of the . Setting it to the same height as the (30px) will middle align it. See here: http://jsfiddle.net/F3KyK/4/

It's better to just set vertical-align: middle on the icon and text. That way you're not making assumptions about the icon height and there's less CSS.

Vertical-align doesn't do anything on block elements, it only works on inline or table-cell elements.

Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


i.fa {
  line-height: 100%;
}
Note
Rectangle 27 0

html How to center text vertically with a large font awesome icon?


div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

What if your container is bigger than 50px? Then it won't work...I have content that changes size and it should have centered icon inside...any idea about that?

Note