[Resolved] Awesome fonts icon sizes

Home Forums Support Awesome fonts icon sizes

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #877771
    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?

    GeneratePress 2.2.2
    GP Premium 1.8.0
    #877988
    Leo
    Staff
    Customer Support

    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 🙂

    #878083
    Killian

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

    #878240
    Tom
    Lead Developer
    Lead Developer
    #878613
    Killian

    OK, I just added a test page.

    #878772
    David
    Staff
    Customer Support

    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.

    #878795
    Killian

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

    #878856
    David
    Staff
    Customer Support

    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;
    }
    #878864
    Killian

    Perfect! Looks great, thank you very much.

    #878867
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.