Page 1 of 1

replace an FontAwesome with custom image

Posted: Fri Mar 24, 2017 12:52 pm
by thunderchero
Hi Everyone,

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

thunderchero

Re: replace an FontAwesome with custom image

Posted: Sat Mar 25, 2017 2:09 am
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

Re: replace an FontAwesome with custom image

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

Re: replace an FontAwesome with custom image

Posted: Sat Mar 25, 2017 3:58 am
by Peter77sx
Clear your cache

Re: replace an FontAwesome with custom image

Posted: Sat Mar 25, 2017 4:12 am
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: "";
}

Re: replace an FontAwesome with custom image

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

Re: replace an FontAwesome with custom image

Posted: Sat Mar 25, 2017 6:11 pm
by Lumpy Burgertushie
EDIT:

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

sorry

robert

Re: replace an FontAwesome with custom image

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

Re: replace an FontAwesome with custom image

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

Re: replace an FontAwesome with custom image

Posted: Sun Mar 26, 2017 2:45 am
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: "";
}

Re: replace an FontAwesome with custom image

Posted: Sun Mar 26, 2017 3:35 am
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

Re: replace an FontAwesome with custom image

Posted: Sun Mar 26, 2017 1:38 pm
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

Re: replace an FontAwesome with custom image

Posted: Sun Mar 26, 2017 2:48 pm
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

Re: replace an FontAwesome with custom image

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