Change breadcrumb home icon to text = Home?

net1994

Hi All - I want to replace the breadcrumb home page icon, to text that just says 'Home' or the like. Then it would show as 'Home>Folder>Gallery.....' I searched here, google and can't find the CSS for this. Or even better, if I can keep the home icon and right next to it add 'Home' all on the same line.

Thanks

net1994

Anyone?

net1994

MarcQuinlivan

.sm-user-ui .sm-page-widget .sm-breadcrumbs:before {
    content: "Home" !important;
}
.sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
    display: none !important;
}

net1994

Hi Marc - That didn't do it. I played around with the text/css and no dice. Any other ideas?

MarcQuinlivan

Works for me.

Have you set it in global CSS?

net1994

Hello - Yes I added it to the 'entire site' CSS. See pic below. I also have a Theme set for my mobile CSS customizations. Should I also put it in there? Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

denisegoldberg

@net1994 said:
Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

You can use web developer tools in browsers to experiment with changes to sites. I often use Web Developer in Firefox.

MarcQuinlivan

@net1994 said:
Hello - Yes I added it to the 'entire site' CSS. See pic below. I also have a Theme set for my mobile CSS customizations. Should I also put it in there? Also I was curious, how were you able to modify my site as I see you do have the 'Home' crumb visible?

Can you add it to the very top of your CSS block, just in case it is nested inside another piece of code that is not applying?

I can't see the code on your page at the minute - have you removed it again?

I use the developer tools in Chrome to fiddle with the CSS - I don't actually have access to your site's code directly.

Have you clicked Customize at the top and then "content and design" and on the right hand pane selected "Entire Site" and edited the CSS there? It looks to me like you are only editing the CSS block for a single page.

net1994

Hi Marc - I moved the code to the top of my css block. Now it has the text 'Home' instead of the icon. However when you actually click on the text, it doesn't take you to the home page.
Aslo I was wondering if there is a way to keep the home icon, and then still put the text 'Home' to the right of it?

MarcQuinlivan

oh hang on....

you can't add html to the content block.

just remove the

.sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
    display: none !important;
}

to keep the icon

net1994

That got the home icon back, thanks! Though when I click on the text Home, it still doesn't take me to the home page. I was hoping to be able to use both the text and icon for redirect to the home page.

MarcQuinlivan

Just need to figure out how to put home after the home button rather than before it.

MarcQuinlivan

@net1994 said:
That got the home icon back, thanks! Though when I click on the text Home, it still doesn't take me to the home page. I was hoping to be able to use both the text and icon for redirect to the home page.

Yeah ,that's the bit we need to figure out how to add the "Home" text inside the link where the home icon is.