Changing bullets

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

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

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.

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?

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

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

Yep that will work - I prefer using lists though :)

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.

It's not terrible for one off changes like that - just don't do it for everything :)

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?

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