Changing bullets

[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

[Tony K Boatright]

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

[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

[Tom]

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.

[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 7 years, 9 months ago by Max.

[Tom]

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

[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 7 years, 9 months ago by Max.
• This reply was modified 7 years, 9 months ago by Max.

[Tom]

Yep that will work – I prefer using lists though 🙂

[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.

[Tom]

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

[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 7 years, 9 months ago by Max.

[Tom]

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

[Author]

Posts