replace an FontAwesome with custom image

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
thunderchero
Registered User
Posts: 129
Joined: Sun Nov 03, 2013 10:16 pm

replace an FontAwesome with custom image

Post by thunderchero »

Hi Everyone,

I want to replace the "home" FontAwesome with a custom image. how would I accomplish this?

thunderchero
Last edited by Hanakin on Mon Mar 27, 2017 2:33 am, edited 1 time in total.
Reason: Topic icon changed
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1016
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin »

its not recommended to use imgs...I would suggest you convert it to an svg then you can change the css to use it.

This is done to allow for retina screens and faster page loads due to smaller file sizes.

try adding the following to the bottom of colours.css

Code: Select all

.fa-home:before {
    background-imge: url("path/to/your/img.svg");
    content: "";
}
you may need to adjust the spacing and size slightly
User avatar
thunderchero
Registered User
Posts: 129
Joined: Sun Nov 03, 2013 10:16 pm

Re: replace an FontAwesome with custom image

Post by thunderchero »

thanks for the effort, but did not work.

I got closer editing navbar_header.html, but this is not acceptable even for me.

so I will just keep the original home icon.
Peter77sx
Registered User
Posts: 3260
Joined: Wed Nov 09, 2005 2:51 pm

Re: replace an FontAwesome with custom image

Post by Peter77sx »

Clear your cache
User avatar
P_I
Registered User
Posts: 1212
Joined: Tue Mar 01, 2011 8:35 pm
Location: Staying home - Calgary
Contact:

Re: replace an FontAwesome with custom image

Post by P_I »

Hanakin wrote:
Sat Mar 25, 2017 2:09 am

Code: Select all

.fa-home:before {
    background-imge: url("path/to/your/img.svg");
    content: "";
}
Small typo may be the cause why it didn't work, shouldn't it be

Code: Select all

.fa-home:before {
    background-image: url("path/to/your/img.svg");
    content: "";
}
Normal people… believe that if it ain’t broke, don’t fix it. Engineers believe that if it ain’t broke, it doesn’t have enough features yet. – Scott Adams
User avatar
thunderchero
Registered User
Posts: 129
Joined: Sun Nov 03, 2013 10:16 pm

Re: replace an FontAwesome with custom image

Post by thunderchero »

yes I cleared cache, yes I noticed/corrected typo.

I tried svg, gif, and even tried png. strange thing was original home icon would disappear, but my image would never display. but last test I forgot to put back original colors.css and after a while (30 min) original home icon started displaying again.

thunderchero
User avatar
Lumpy Burgertushie
Registered User
Posts: 68010
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie »

EDIT:

sorry, I was wrong about how to do it. I have no idea.

sorry

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
thunderchero
Registered User
Posts: 129
Joined: Sun Nov 03, 2013 10:16 pm

Re: replace an FontAwesome with custom image

Post by thunderchero »

Lumpy Burgertushie wrote:
Sat Mar 25, 2017 6:11 pm
I have no idea.
Ok, when Lumpy has no idea it is time for me to give up. :roll:

thunderchero
User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 4802
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: replace an FontAwesome with custom image

Post by HiFiKabin »

Try this

Create and save the appropriate image in the images directory, then:-

OPEN

styles/prosilver/template/navbar_header.html

FIND

Code: Select all

				<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemprop="url" accesskey="h" data-navbar-reference="index"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span></a></span>
REPLACE WITH

Code: Select all

                <span class="crumb" {$MICRODATA}><a href="{U_INDEX}"><img style="border:none" src="{BOARD_URL}images/icon.gif" title="{L_INDEX}"></a></span>
(changing icon.gif to the name of your image)

SAVE > UPLOAD > PURGE CACHE

Backup first just in case.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1016
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin »

can you post a link to your board method i posted works for me

you could also try putting it on the fa-home class itself

Code: Select all

.fa-home {
    vertical-align: text-bottom;
    width: 14px;
    height: 14px;
    background: url(home.svg);
    margin-right: 4px;
}

.fa-home:before {
    content: "";
}
User avatar
Lumpy Burgertushie
Registered User
Posts: 68010
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie »

hanakin, I tested your code ( with the typo fixed ) and it did the same thing it did for the OP. the fa icon disappeared but the new image did not show up.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1016
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin »

OP & Lumpy

perhaps the first version may not work in all browsers can not confirm without seeing it on your forum, but changing the entire fa-home class as I did above absolutely will.

You can also inline the entire svg code if you wish

replace

Code: Select all

<!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="title">{L_INDEX}</span>
with (your svg code)

Code: Select all

<!-- IF not U_SITE_HOME -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="{L_INDEX}">
	...
</svg>
<!-- ENDIF -->
be sure to add the aria-label="{L_INDEX}" to the end of the svg tag for screen readers
User avatar
Lumpy Burgertushie
Registered User
Posts: 68010
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie »

Ok, I did not use a svg image, I simply used a normal gif image for the test. since I don't know anything about svg images that could easily be the problem.


rob ert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?
User avatar
thunderchero
Registered User
Posts: 129
Joined: Sun Nov 03, 2013 10:16 pm

Re: replace an FontAwesome with custom image

Post by thunderchero »

Thanks Hanakin,

been busy testing myself, this code worked, just have some alignment issues now.

Code: Select all

.fa-home {
    vertical-align: middle;
    width: 27px; 
    height: 27px;
    background: url("./images/your image.png");
}

.fa-home:before {
    content: "";
}
I first tested with a currently used png, and I know I need to update my image format to use svg.

important; width and height needs to be correct size of image for image to display.

thunderchero
Post Reply

Return to “[3.2.x] Styles Support & Discussion”