[Resolved] Awesome fonts icon sizes

[Killian]

Question isn’t directly related to your theme, but maybe you can help….

In this list the size of icons works fine.

<i class="fas fa-calendar-alt fa-2x fa-fw" style="color: #d35429;"></i><strong> Tour Duration:</strong> Approximately ....

<i class="fas fa-hiking fa-2x fa-fw" style="color: #d35429;"></i><strong> Walking Duration:</strong> Approximately ....

<i class="fas fa-mountain fa-2x fa-fw" style="color: #d35429;"></i><strong> Activity level:</strong> Moderate....

<i class="fas fa-tag fa-2x fa-fw" style="color: #d35429;"></i><strong> Price:</strong> From ....

But in the ordered list the sizes make the icons overlap vertically.

<ul class="fa-ul">
  <li><span class="fa-li" ><i class="fas fa-calendar-alt fa-2x" style="color: #d35429;"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-hiking fa-2x" style="color: #d35429;"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-mountain fa-2x" style="color: #d35429;"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fas fa-tag fa-2x" style="color: #d35429;"></i></span>in lists</li>
</ul>

How can I use the list version, but fix so the icons do not overlap vertically?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Killian]

I have it on a draft page only. I could put it on a live page temporarily?

[Tom]

That would be great 🙂

[Killian]

OK, I just added a test page.

[David]

Hi there,

can you share the link to the page? You can edit your original Topic ( top right of the topic > edit ) and use the Site URL field to share it privately.

[Killian]

I shared the link this morning. Just redid it again.

[David]

The issue arises from having the fa-2x class added to the icons. FontAwesomes CSS does not account for 2x sized icons in lists hence they overlap. If you need the x2 size then try this CSS:

.fa-ul {
    margin-left: 3em !important;
    line-height: 3em;
}
.fa-li {
    margin-left: -1em;
}

[Killian]

Perfect! Looks great, thank you very much.

[David]

Glad to be of help

[Author]

Posts