Black Friday Sale! Get up to $40 off GP Premium!Learn more

Changing bullets

Home Forums Support Changing bullets

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #205987
    Joyce Hollman

    Is there a way to change the round bullets to something else, like check marks? I’ve seen it done on others’ sites using Generate Press. Anyone know how? Thanks!
    Joyce

    #206003
    Tony K Boatright

    I have the same question. Are wingding and webwing fonts available?

    #206035
    Max

    Hey Joyce and Tony

    Generatepress already has Fontawesome icons installed.

    You can see the full range of those icons here:

    http://fontawesome.io/cheatsheet/

    If you want to use any of the icons as bullet points you can.

    For example, create a new wp page and then click on the text tab and past in the following code:

    <ul>
      <li><i class="fa-li fa fa-check-square"></i>List icons</li>
      <li><i class="fa-li fa fa-check-square"></i>can be used</li>
      <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
      <li><i class="fa-li fa fa-square"></i>in lists</li>
    </ul>

    Then publish your new page and view it in your browser to check out the result.

    There are more examples of how to use fontawesome icons here:

    http://fontawesome.io/examples/

    Kind Regards

    Max

    #206043
    Tom
    Lead Developer
    Lead Developer

    Great tip, Max!

    The only thing you’re missing in the <ul> class:

    <ul class="fa-ul">
      <li><i class="fa-li fa fa-check-square"><!-- icon --></i>List icons</li>
      <li><i class="fa-li fa fa-check-square"><!-- icon --></i>can be used</li>
      <li><i class="fa-li fa fa-spinner fa-spin"><!-- icon --></i>as bullets</li>
      <li><i class="fa-li fa fa-square"><!-- icon --></i>in lists</li>
    </ul>

    You’ll also want to add an HTML comment inside the icon element like I did above to prevent WP from stripping the tags.

    #206045
    Max

    I actually deleted that class because I though it referenced to the css on the fontawesome page??

    Is it some kind of native settings that installs with the icons?

    • This reply was modified 4 years, 4 months ago by Max.
    #206046
    Tom
    Lead Developer
    Lead Developer

    Nope, it sets the li elements as relative, and removes the default bullets for the list 🙂

    #206055
    Max

    Yep. Got it..just tested without the class and doesn’t work.

    I didn’t realise because I never do it that way I usually just insert where needed.

    I am running this in one of my sidebar text widgets and it looks great.

    Would be happy/grateful for you to proof it for me.

    <div class="grid-container">
    <div class="grid-50 tablet-grid-50 mobile-grid-100">
    
    <p style="margin-bottom:5px; margin-top:5px;"><a href="http://localhost/forum/hot-topics/"><i class="fa fa-sign-out fa-lg fa-fw"><!-- HTML comment --></i>Hot Topics</a></p>
    
    <p style="margin-bottom:5px;"><a href="http://localhost/forum/search/"><i class="fa fa-sign-out fa-lg fa-fw"><!-- HTML comment --></i>Search</a></p>
    
    </div>
    
    <div class="grid-50 tablet-grid-50 mobile-grid-100">
    
    <p style="margin-bottom:5px;"><a href="http://localhost/forum/new-users/"><i class="fa fa-sign-out fa-lg fa-fw"><!-- HTML comment --></i>New Users</a></p>
    
    <p style="margin-bottom:5px;"><a href="http://localhost/forum/faqs/"><i class="fa fa-sign-out fa-lg fa-fw"><!-- HTML comment --></i>FAQs</a></p>
    </div>
    </div>
    

    Kind Regards

    Max

    • This reply was modified 4 years, 4 months ago by Max.
    • This reply was modified 4 years, 4 months ago by Max.
    #206058
    Tom
    Lead Developer
    Lead Developer

    Yep that will work – I prefer using lists though 🙂

    #206064
    Max

    I know that css belongs in the style sheet, but is there anything terribly wrong with making my small margin stylings inline in the paragraph (and also styling the icon color)? It is just so much quicker and easier than creating a separate class, if you are a newb like me.

    #206065
    Tom
    Lead Developer
    Lead Developer

    It’s not terrible for one off changes like that – just don’t do it for everything 🙂

    #206071
    Max

    So for my example above, if I remove the outer grid-container div and just have the two remaining 50-50-100 divs it will be ok?

    • This reply was modified 4 years, 4 months ago by Max.
    #206083
    Tom
    Lead Developer
    Lead Developer

    Yep that should work fine, you might just have to clear the float if you do that.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.