• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Using Font Awesome icons for the Post Ratings addon

Stuart Wright

Well-known member
#1
So I wanted to investigate using Font Awesome for the icons in @Luke Foreman 's justifiably popular Post Ratings addon.
It's not that easy, but if you have Font Awesome already in use then this is what I did.
First edit the post ratings at /admin.php?postrating/list and enter the name of the Font Awesome icon instead. E.g. for Like I use fa-thumbs-up
and make sure Sprite Mode is disabled (unchecked).
temp0.jpg
Then I searched in the template system for
src="styles/dark/ratings
to find and then edit the following templates
alert_postrating_rate
dark_postrating_detail
dark_postrating_input
dark_postrating_member
dark_postrating_output
dark_postrating_thread_icon
news_feed_item_postrating_rate

It's a simple case of changing the HTML from displaying an image to displaying the Font Awesome icon.
But the HTML is not quite the same in all the templates. It's one of three types.
Here are the three types and what I changed them to:
Code:
<img src="styles/dark/ratings/{$rating.name}" alt="{$rating.title}" title="{$rating.title}" />
to
<i class="fa {$content.rating.name} fa-lg" title="{$rating.title}"></i>
or
Code:
<img src="styles/dark/ratings/{$rating.name}" alt="{$rating.title}" />
to
<i class="fa {$content.rating.name} fa-lg"></i>
or
Code:
<img src="styles/dark/ratings/{$content.rating.name}" alt="" style="vertical-align:middle" />
to
<i class="fa {$content.rating.name} fa-lg" style="vertical-align:middle"></i>
And that's it.
I couldn't figure out how to edit the admin template in order to fix the broken images on the admin ratings page, but that's not important.
Can anyone with any expertise let me know if I've missed anything?
Thanks.
 
Last edited: