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 » Fri Mar 24, 2017 12:52 pm

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 754
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin » Sat Mar 25, 2017 2:09 am

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 » Sat Mar 25, 2017 3:49 am

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: 3250
Joined: Wed Nov 09, 2005 2:51 pm

Re: replace an FontAwesome with custom image

Post by Peter77sx » Sat Mar 25, 2017 3:58 am

Clear your cache

User avatar
P_I
Registered User
Posts: 860
Joined: Tue Mar 01, 2011 8:35 pm
Location: Calgary
Contact:

Re: replace an FontAwesome with custom image

Post by P_I » Sat Mar 25, 2017 4:12 am

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 » Sat Mar 25, 2017 5:54 pm

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: 65322
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie » Sat Mar 25, 2017 6:11 pm

EDIT:

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

sorry

robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

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 » Sat Mar 25, 2017 7:08 pm

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: 3339
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 » Sat Mar 25, 2017 8:05 pm

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
Infrastructure Team Member
Infrastructure Team Member
Posts: 754
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin » Sun Mar 26, 2017 2:45 am

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: 65322
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie » Sun Mar 26, 2017 3:35 am

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 am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 754
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: replace an FontAwesome with custom image

Post by Hanakin » Sun Mar 26, 2017 1:38 pm

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: 65322
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: replace an FontAwesome with custom image

Post by Lumpy Burgertushie » Sun Mar 26, 2017 2:48 pm

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 am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

OK, so what's the speed of dark?

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 » Sun Mar 26, 2017 4:15 pm

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”

Who is online

Users browsing this forum: No registered users and 8 guests