How can I use fontawesome icons as the default bullet for unordered lists?

3 Views

On fontawesome’s example page, they show this code:

Use fa-ul and fa-li to easily replace default bullets in unordered
lists.

Read More
<ul class="fa-ul">   
    <li><i class="fa-li fa fa-check-square"></i>Listicons (like these)</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>to replace</li>   
    <li><i class="fa-li fa fa-square"></i>default bullets in lists</li> 
</ul>

This works fine, but I have a lot of unordered lists on my wordpress site, and I was wondering if it was possible to make the fontawesome checkbox the default bullet across the entire site?
I know that my theme uses LESS, so any LESS code is acceptable.

I was thinking about doing something like like this in css: 

ul li i {
   class="fa-li fa fa-square";
}

But I don’t think that’s possible with css. I was looking at LESS and I think mixins might prove useful, but I haven’t been able to figure out the correct syntax.

Any help is much appreciated.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Just look at how they actually got the icons to appear on their site. They use a before pseudoelement that has the FontAwesome font-family and to make the actual icon appear they use the content property.

    http://jsfiddle.net/kqa6B/

    <ul>
    <li>One</li>
    <li>Two</li>
</ul>

    .

    li {
    list-style:none;
}

li:before {
    font-family:'FontAwesome';
    content:"f14a";
}