Forum images change to Font Awesome images

[Joost]

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

[SLGray]

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

[Joost]

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 ?

[SLGray]

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;}

[Joost]

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)

[tikky]

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;
}


[Joost]

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

[tikky]

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

use

Code: [code][/code]

[Joost]

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.

[Revolved101]

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

[Ape]

@Joost is this now solved ?

[Joost]

@Joost is this now solved ?

Yes, this is solved.

[SLGray]

Problem solved & topic archived. Please read our forum rules:  ESF General Rules