The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Forum images change to Font Awesome images

5 posters

Go down

Solved Forum images change to Font Awesome images

Post by Joost Tue Feb 13, 2018 11:00 am

Dear member, Hello

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

Forum images change to Font Awesome images Scr23

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

Regards, Joost


Last edited by Joost on Mon Feb 26, 2018 1:52 am; edited 1 time in total
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray Tue Feb 13, 2018 12:10 pm



Forum images change to Font Awesome images Slgray10

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

Male Posts : 51478
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost Tue Feb 13, 2018 2: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
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray Tue Feb 13, 2018 3: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 :

Forum images change to Font Awesome images Captur21
Code:Select Content
Code:
a.mainmenu:before, a.mainmenu::before {  content:"";  font-family:FontAwesome;}


Forum images change to Font Awesome images Slgray10

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

Male Posts : 51478
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost Wed Feb 14, 2018 1: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 :

Forum images change to Font Awesome images Captur21
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
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by tikky Wed Feb 14, 2018 5:11 am

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:
Forum images change to Font Awesome images Vsdkjm




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

Posts : 895
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost Wed Feb 14, 2018 8:00 am

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

Forum images change to Font Awesome images Scr24
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by tikky Thu Feb 15, 2018 1:25 pm

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

use
Code:
[code][/code]
tikky
tikky
Forumember

Posts : 895
Reputation : 157
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost Fri Feb 16, 2018 5:53 am

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.
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Revolved101 Thu Feb 22, 2018 10:19 pm

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
Revolved101
Forumember

Posts : 35
Reputation : 1
Language : English

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Ape Mon Feb 26, 2018 4:43 pm

@Joost is this now solved ?


Forum images change to Font Awesome images Left1212Forum images change to Font Awesome images Center11Forum images change to Font Awesome images Right112
Forum images change to Font Awesome images Ape_b110
Forum images change to Font Awesome images Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19107
Reputation : 1991
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by Joost Tue Feb 27, 2018 2:23 pm

APE wrote:@Joost is this now solved ?

Yes, this is solved.
Joost
Joost
Active Poster

Male Posts : 1350
Reputation : 188
Language : Dutch, English
Location : The Netherlands

https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Forum images change to Font Awesome images

Post by SLGray Tue Feb 27, 2018 2:34 pm

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


Forum images change to Font Awesome images Slgray10

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

Male Posts : 51478
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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