Vertically align fontawesome icon with flexbox

Question

I wan't to align vertically my icons inside a list item. I've tried some approaches, but I can't figure it out how to align the icons properly to the center. This is the most visible in example bellow with arrow icon, near the close icon. Any ideas?

li {
  display: flex;
}

.fa {
  flex-grow: 0;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.title {
  flex-grow: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
  <ul>
    <li>
        <span class="fa fa-ellipsis-v"></span>
        <span class="fa fa-eye"></span>
        <span class="title">Item 1</span>
        <span class="fa fa-sort-down"></span>
        <span class="fa fa-times"></span>
    </li>
    <li>
        <span class="fa fa-ellipsis-v"></span>
        <span class="fa fa-eye"></span>
        <span class="title">Item with long title</span>
        <span class="fa fa-sort-down"></span>
        <span class="fa fa-times"></span>
    </li>
  </ul>

the properties of alignment should be added to parent element (the flex container) — Temani Afif, Jul 18 '18 at 12:00
@TemaniAfif This is not a flexbox issue. It's a font-awesome issue. — Paulie_D, Jul 18 '18 at 12:03

score 2 · Accepted Answer · edited Jul 18 '18 at 12:13

Essentially, you can't...some of the glyphs aren't centered in their bounding font-boxes.

You can see this if you put a border around the icon.

This is not correctable with flexbox.

li {
  display: flex;
  align-items: center;
}

.fa {
  flex-grow: 0;
  display: flex;
  border: 1px solid grey;
}

.title {
  flex-grow: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item 1</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
  </li>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item with long title</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
    <span class="fa fa-caret-down"></span>
  </li>
</ul>

As you have noted yourself

"There is a fa-caret-down icon, which is properly centered."

and this seems to be the appropriate alternative.

Vertically align fontawesome icon with flexbox

1 Answers1