Align text to font awesome icons

Question

I am trying to vertically align the text beside my FontAwesome icons. I can do it manually with a padding-left, but that seems wrong to do.

Is there an easier way to do this?

<div class="row">
<div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fas fa-snowflake"></i> A/C service<br/>
                <i class="fa fa-angle-right"></i> Aut-gear service<br/>
                <i class="fas fa-car-side"></i> Bil-leasing<br/>
                <i class="fas fa-car"></i> Bil-salg<br/>
                <i class="fas fa-oil-can"></i> Bilsyn<br/>
                <i class="fa fa-angle-right"></i> BMW Keyreader<br/>
                <i class="fa fa-angle-right"></i> BMW-testudstyr (ISTA)<br/>
                <i class="fas fa-book"></i> Digital servicebog<br/>
                <i class="fas fa-hotel"></i> Dækhotel<br/>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6">
            <ul>
                <i class="fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding<br/>
                <i class="fa fa-angle-right"></i> Klassiske biler<br/>
                <i class="fas fa-mug-hot"></i> Kundelounge<br/>
                <i class="fa fa-angle-right"></i> Låne/leje-biler<br/>
                <i class="fa fa-angle-right"></i> Skade-reparation<br/>
                <i class="fas fa-code"></i> Software-opdatering & kodning<br/>
                <i class="fas fa-tools"></i> Specialværktøj<br/>
            </ul>
        </div>
    </div>      
</div>

Best regards.

Answer 1

You should do the following modifications:

• Children in uls should be lis to have a correct HTML,
• Use fa-fw to set icons at a fixed width,
• Remove the brs that are no longer necessary,

Then, you can use margin-right on your li i elements to add some more spacing between icons and texts.

ul {
  /* Remove the ul default styling */
  list-style: none;
}

li i {
  margin-right: 20px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅ ⋅ ⋅

If you don't need to add some space between the list icons and the texts, you should also do the following:

• Use fa-ul and fa-lis to easily replace default bullets,
• No need to stylize ul or li.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-li fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-li fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-li fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-li fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-li fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul class="fa-ul">
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-li fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-li fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-li fa-fw fas fa-code"></i> Software-opdatering & kodning</li>
          <li><i class="fa-li fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

⋅ ⋅ ⋅

Check the Font Awesome Examples for more information.

Answer 2

Check my code:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul>li {
  position: relative;
  padding-left: 40px;
}

ul>li>[class*="fa"] {
  position: absolute;
  top: 0;
  left: 0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<div class="row">
  <div id="tb-testimonial" class="testimonial testimonial-default">
    <div class="testimonial-section">
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fas fa-snowflake"></i> A/C service</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Aut-gear service</li>
          <li><i class="fa-fw fas fa-car-side"></i> Bil-leasing</li>
          <li><i class="fa-fw fas fa-car"></i> Bil-salg</li>
          <li><i class="fa-fw fas fa-oil-can"></i> Bilsyn</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW Keyreader</li>
          <li><i class="fa-fw fa fa-angle-right"></i> BMW-testudstyr (ISTA)</li>
          <li><i class="fa-fw fas fa-book"></i> Digital servicebog</li>
          <li><i class="fa-fw fas fa-hotel"></i> Dækhotel</li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-6">
        <ul>
          <li><i class="fa-fw fa fa-angle-right"></i> Elektronisk diagnose & fejlfinding</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Klassiske biler</li>
          <li><i class="fa-fw fas fa-mug-hot"></i> Kundelounge</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Låne/leje-biler</li>
          <li><i class="fa-fw fa fa-angle-right"></i> Skade-reparation</li>
          <li><i class="fa-fw fas fa-code"></i> Software-opdatering & kodning Software-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering & kodningSoftware-opdatering
            & kodningSoftware-opdatering & kodning</li>
          <li><i class="fa-fw fas fa-tools"></i> Specialværktøj</li>
        </ul>
      </div>
    </div>
  </div>

Answer 3

Add fa-fw to the class list (that sets fixed width icons)

Docs: https://fontawesome.com/v4.7.0/examples/#fixed-width or https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons