Search code examples
htmlcsscss-selectorsalignmentvertical-alignment

CSS - Align Font Awesome icon with a paragraph of text

I know this question is being asked quite frequently, but I went through all available answers and none of them works for me.

I've got a working codepen here: https://codepen.io/anon/pen/WPzGrO

I am trying to align the FA icons next to the paragraph of text. So the icon should be in the middle of the paragraph. When the para breaks into 2 or more lines, the icon appears at the bottom as you can see in the codepen.

the vertical-align: middle; or line-heigh property doesn't seem to do anything here.

How can I fix this?

Solution

  • Remove the vertical-align, line-height and height rules and add the following:

    #menu-list p::after {
  …
  transform: translateY(-50%);
  top: 50%;   
}

    enter image description here

    #menu-list {
  background: #eee;
  padding: 50px 100px;
}

#menu-list p {
  position: relative;
  padding-left: 40px;
  text-align: left;
}

#menu-list p::after {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  font-size: 32px;
  color: #599FF8;  
  width: 32px;
  transform: translateY(-50%);
  top: 50%;
}
    <link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div id="menu-list"> 
  <p>This is the longest text that will stack into few lines</p>
  <p>This one will make 2 lines</p>
  <p>And a single line</p>
</div>