Vertically align and justify text next to font awesome icon

Question

I am putting together a “contact” section on my website and am running into difficulty formatting the information. What I'd like is a vertical list of icons with text vertically aligned next to it.

For a single line, this means the line of text should be aligned with the horizontal axis of the icon.

For multiple lines, the first line of text should be aligned with the horizontal axis of the icon, and subsequent lines should be left-justified with the first line of text, not the icon. I can't figure out how to get that effect though.

This is what I have so far:

 ul { list-style: none; } p { display: inline; } a { font-size: 28px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <ul> <li><a><i class="fa fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li> <li><a><i class="fa fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li> <li><a href="#" target="_blank"><i class="fa fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li> <li><a href="#" target="_blank"><i class="fa fa-5x fa-github"></i><p>GitHub</p></a></li> </ul> 

Here's a JSFiddle of my code. I've been using an unordered list with the <li> style attribute disabled.

How can I change my CSS to achieve my described layout?

Answer 1

I've adapted the code from your JSFiddle to meet your requirements.

The .fa and p elements are now inline-block with a vertical-align of middle .

Additionally, I added the fa-fw (Font Awesome fixed width) class to your icons, as explained here .

Example below:

 ul { list-style: none; } .fa, p { display: inline-block; vertical-align: middle; } a { font-size: 28px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <ul> <li><a><i class="fa fa-fw fa-5x fa-envelope"></i><p>Multi-line Address Line 1<br>Line 2</p></a></li> <li><a><i class="fa fa-fw fa-5x fa-at"></i><p><b>email</b> at <b>yahoo</b> dot <b>com</b></p></a></li> <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-linkedin"></i><p>LinkedIn</p></a></li> <li><a href="#" target="_blank"><i class="fa fa-fw fa-5x fa-github"></i><p>GitHub</p></a></li> </ul> 

Answer 2

Looks like I was beaten to the punch. Much the same, except I removed the i and placed them :before the li . I just prefer things to be in CSS for replicating in other areas of the site if needed.

 ul { list-style: none; } li { font-size: 28px; display: inline-block; } li.address:before { font-family: fontawesome; content: '\\f0e0'; margin-right: 10px; display: inline-block; } li.email:before { font-family: fontawesome; content: '\\f1fa'; margin-right: 10px; } a { display: inline-block; vertical-align: middle; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <ul> <li class="address"><a>Multi-line Address Line 1<br>Line 2</a> </li> <li class="email"><b>email</b> at <b>yahoo</b> dot <b>com</b></li> </ul>