The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum images change to Font Awesome images

Go down

Solved Forum images change to Font Awesome images

Post by Joost on February 13th 2018, 6:00 pm

Dear member, Hello

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



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

Regards, Joost


Last edited by Joost on February 26th 2018, 8:52 am; edited 1 time in total
avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray on February 13th 2018, 7:10 pm



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42731
Reputation : 3010
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost on February 13th 2018, 9:28 pm


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 ? Very Happy
avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray on February 13th 2018, 10:27 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42731
Reputation : 3010
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost on February 14th 2018, 8:33 am

@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) Smile Embarassed
avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by pedxz on February 14th 2018, 12:11 pm

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;
}
avatar
pedxz
Forumember

Male Posts : 86
Reputation : 14
Language : português

http://ajuda.forumeiros.com/u62843

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost on February 14th 2018, 3:00 pm

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

avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by pedxz on February 15th 2018, 8:25 pm

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

use
Code:
[code][/code]
avatar
pedxz
Forumember

Male Posts : 86
Reputation : 14
Language : português

http://ajuda.forumeiros.com/u62843

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost on February 16th 2018, 12:53 pm

@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. Smile
Many thanks for your help and time.
avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Mr_Grande on February 23rd 2018, 5:19 am

@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
avatar
Mr_Grande
New Member

Posts : 18
Reputation : 1
Language : English

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by APE on February 26th 2018, 11:43 pm

@Joost is this now solved ?



avatar
APE
Manager
Manager

Male Posts : 11861
Reputation : 1173
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost on February 27th 2018, 9:23 pm

@APE wrote:@Joost is this now solved ?

Yes, this is solved.
avatar
Joost
Forumember

Male Posts : 762
Reputation : 8
Language : Dutch
Location : The Netherlands

http://ondersteun.actieforum.com/u119

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray on February 27th 2018, 9:34 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42731
Reputation : 3010
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum