Archived topic
Awesome fonts icon sizes
9 replies · Started by Killian on April 24, 2019
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?
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 :)
I have it on a draft page only. I could put it on a live page temporarily?
That would be great :)
OK, I just added a test page.
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.
I shared the link this morning. Just redid it again.
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;
}Perfect! Looks great, thank you very much.
Glad to be of help
