多行网图标

Question

I am doing project on FreeCodeCamp and i want to put two lines next to icon, but one is under the icon, how can i solve it?

 p { display: inline; vertical-align: top; } .icon-header { font-size: 50px; color: black; margin-left: 5%; display: inline-block; vertical-align: top; } .icon-text { display: inline-block; float: left; color: black; font-size: 14px; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" > <i class="fas fa-hand-holding-usd"><p><span class="icon-header">Low Prices</span><br><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p></i> 

Answer 1

You can use position for icon

 p { display: inline-block; vertical-align: middle; padding-left: 44px; position: relative; } pi{ position: absolute; left: 0; top: 15%; font-size: 32px; } .icon-header { font-size: 50px; color: black; display: block; vertical-align: top; } .icon-text { display: block; float: left; color: black; font-size: 14px; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" > <p><i class="fas fa-hand-holding-usd"></i> <span class="icon-header">Low Prices</span><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p>