Replace 'Home Icon' to a Different FontIcon

Hikin' Mike

I'm trying to change the sm-fonticon-Home icon to a different icon. The default Home fonticon is:

.sm-fonticon-Home:before {
    content: '\E317'
}

Want to use the 'Image' instead:

.sm-fonticon-Image:before {
    content: '\E32A'
}

Tried to add it to my custom CSS, but no-go.

.sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button.sm-icon-Home:before {
    font-family: 'SmugMug Icon Font Regular';
    content: '\E32A' !important;    
    vertical-align: top;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    }

Anybody? @leftquark

Jtring

Here's a start. SmugMug changed the code to use SVG for the icons instead of simply a font item, so it looks like a remove-and-replace strategy is needed. That change to SVG also shuffled the class structure a bit: the sm-button and sm-icon-Home classes now live on different lines of HTML. The following mostly does what you want but there's still work to be done. This simple code mis-aligns the first ">".

.sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
     display:none;   
}
.sm-user-ui .sm-page-widget .sm-breadcrumbs:before {
    font-family: 'SmugMug Icon Font Regular';
    content: "\E32A" !important; 
}

I, unfortunately, don't see how to work with the SVG -- unfamiliar stuff for me -- or how to redefine the #sm-icon-def-small-Home that gets called in the part of the SVG via CSS patches. Anyone else?

Hikin' Mike

Thanks and it works, sort of. Unfortunately I need the icon to include the link. This code doesn't.

I'm 99% sure this can't be done.

Jtring

Since the newer sm-item-Home, which is currently in the SM breadcrumbs, works rather differently from the old sm-fonticon-Home, you are probably right that direct re-definition can't be done. Still, it should be possible to get something that carries out the function of showing the different, yet clickable, home icon in an otherwise standard SmugMug breadcrumb. Consider something like this, which makes the old icon invisible (but still present) and then slides a new one underneath it (hence the z-index=-1). I've sized and positioned the new icon better than I did in the last version. My breadcrumbs use a 14px font. The size and position values would need adjustment for anything else.

.sm-user-ui .sm-page-widget .sm-breadcrumbs .sm-breadcrumb-item .sm-button .sm-icon-Home {
    visibility:hidden;   
}
.sm-user-ui .sm-page-widget .sm-breadcrumbs {
    display:inline;
}
.sm-user-ui .sm-page-widget .sm-breadcrumbs:before {
    font-family: 'SmugMug Icon Font Regular';
    content: "\E32A" !important; 
    margin-right: -15px;
    font-size:25px;
    position: relative;
    bottom: -3px;
    z-index: -1;
}

Right now, I've got this live on one unlisted test page of my site: https://jtringl.smugmug.com/Other/Misc-Galleries/Misc-Pictures/n-VLtp6V/ . Take a look. I'll not keep this up indefinitely.

Hikin' Mike

Took a look at your test page and it looks like it's going to work!

The reason why I wanted a different icon is my website is a WordPress site. My SM site is a subdomain and using the SM breadcrumbs is confusing with two "Home House Icons". I've been using a custom breadcrumbs on my SM site to make the two sites identical. I'm in the process of changing my site and thought I'd try and drop a lot of CSS on my SM site if I could use the SmugMug breadcrumbs.