Font Awesome Icon inline with headline and text

November 5, 2021

I’m trying to create a nice layout for product descriptions using font awesome icons, headline and paragraph text with HTML & CSS .

This will be used in WooCommerce single product pages, so I’m trying to avoid inline styling so that I can put the HTML code in the WordPress wysiwyg editor and CSS in the stylesheet.

I’ve created a visual example of the layout I’m trying to create, but I’m not sure what is practice to achieve it.

Below is the code that I have started, any advice on what direction to take would be much appreciated. Whether table column is the wrong starting point and perhaps it would be better in a list with simple padding?

Thank you.

HTML

<div class="wrapper">
   <div class="icon">
    <i class="fa fa-quote-left fa-4x fa-border" style=""></i>
  </div>
  
  <div class="text">
  <h3>Headline</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.<p/>
    </div>
</div>

CSS

.wrapper (
display: table-row;
)

.icon (
display: table-cell;
vertical-align: top;
)

.text (
display: table-cell; 
vertical-align: top;
)

>Solution :

Flexbox can do that.

.wrapper {
  display: flex;
  align-items: flex-start;
}

* {
  margin: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="icon">
    <i class="fa fa-quote-left fa-border" style=""></i>
  </div>

  <div class="text">
    <h3>Headline</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
      <p/>
  </div>
</div>