Forum images change to Font Awesome images

Dear member,

I have a question about my board images.
How can i change the images to Font Awesome , is that possible?



Thanks for your help and time.
My forum: http://www.hpmagicworld.nl/forum (own domainname)

Regards, Joost

See if the helps:  https://help.forumotion.com/t140086-how-to-install-and-use-font-awesome?highlight=awesome

SLGray wrote:See if the helps:  https://help.forumotion.com/t140086-how-to-install-and-use-font-awesome?highlight=awesome

I have add the template code, i'm working with Font Awesome in HTML pages, and i have this in my editor.
How can i add this to the images ?

1. CSS Pseudo Element

Let's say I wanted to add the fa-link icon next to my navbar links. This can be done by copying the link icon from the cheatsheet and pasting it as the content value. Lastly we need to set the font-family as FontAwesome so the icons display properly. Our result would be :


Code:Select Content

Code:

a.mainmenu:before, a.mainmenu::before {  content:"";  font-family:FontAwesome;}

SLGray wrote:1. CSS Pseudo Element

Let's say I wanted to add the fa-link icon next to my navbar links. This can be done by copying the link icon from the cheatsheet and pasting it as the content value. Lastly we need to set the font-family as FontAwesome so the icons display properly. Our result would be :


Code:Select Content

Code:

a.mainmenu:before, a.mainmenu::before {  content:"";  font-family:FontAwesome;}

These are for navigation, my navigation use all the FontAwesome images. I mean my board images (read forum, unread forum, locked forum and then the topic index (Announcement topic, Sticky topic ect)

Hey @Joost,
you can change the system of images and put with font awesome, that is:

Go to index_body (template) and find the following code

Code:

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->


and change to

Code:

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><i class="fa fa-{FORUM_NEW_IMG}"></i>{L_NEW_POSTS}</li>
   <li><i class="fa fa-{FORUM_IMG}"></i>{L_NO_NEW_POSTS}</li>
   <li><i class="fa fa-{FORUM_LOCKED_IMG}"></i>{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->


Now you go to the topic icons and in each image you change the link to an awesome code

For example:

---

and change this code too

Code:

a.mainmenu:before, a.mainmenu::before {  content:"";  font-family:FontAwesome;}


to

Code:

a.mainmenu::before { 
content: '/f0c1 '; 
font-family: FontAwesome;
}


Thanks for your help @pedxz , this works only on my legend. I will show this in my forum index, topic index and legend.. I'm sorry i don't tell that see i know..

could you give me the following templates?
index_box & topics_list_box & viewforum_body

use

Code: [code][/code]

pedxz wrote:could you give me the following templates?
index_box & topics_list_box & viewforum_body

use

Code: [code][/code]

I have send a PB with the templates to you. Can you send the customize template(s) to PB back. Not in this topic, please.
Many thanks for your help and time.

pedxz wrote:Hey @Joost,

and change this code too

Code:

a.mainmenu:before, a.mainmenu::before {  content:"";  font-family:FontAwesome;}


to

Code:

a.mainmenu::before { 
content: '/f0c1 '; 
font-family: FontAwesome;
}


Where do I find this code

@Joost is this now solved ?

APE wrote:@Joost is this now solved ?

Yes, this is solved.