replace an FontAwesome with custom image

thunderchero · 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

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

thunderchero · 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 · Post by **Peter77sx** » Sat Mar 25, 2017 3:58 am

Clear your cache

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

thunderchero · 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

Lumpy Burgertushie · 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

thunderchero · 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.

thunderchero

**My CDB Contributions** · 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.

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

Lumpy Burgertushie · 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

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

Lumpy Burgertushie · 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

thunderchero · 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