How to vertically align text with icon

Question

I have added awesome icon with p tag and text is appearing below the icon ,how to fix this so text should veritically align itself.

    <p><i class="fas fa-map-marker-alt"></i>21a George Street<br> Croydon CR0 1LA</p>

`.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}`

Many thanks

Answer 1

As font-icons works like fonts, it is normal in your case that it aligns only with the first line !

The solution might be nesting everything in a div, and use display:inline-block one the paragraph, like so :

 .fas { font-size: 30px; color: #C1761B; margin-right: 10px; margin-top: 5px; } p { display:inline-block; } 

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <div> <i class="fas fa-map-marker"></i> <p>21a George Street<br> Croydon CR0 1LA</p> </div> 

Answer 2

Might wanna separate the i from the inside the text so we can have control over both.

Styling on the div just for the explanation and visual effect.

 div { border: 1px solid; display: inline-block; padding: 10px; margin: 10px; } .fa { font-size: 30px; color: #C1761B; display: inline-block; border: 1px solid; vertical-align: middle; } p { border: 1px solid; vertical-align: middle; display: inline-block; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div> <i class="fa fa-map-marker"></i> <p>21a George Street <br>Croydon CR0 1LA</p> </div>