/* ==========================================================================
SVG to CSS Example: Breadcrumbs "Home Icon"
- an example of using the Open Iconic SVG code to create a "home" icon
- this is the same method as used in the Bootstrap 4 _variables.sccs file
- started by downloading the distro from https://useiconic.com/open
- found the 'home' icon SVG and copied its path code
- then pasted the path code into one of the Bootstrap icon definitions &
changed the fill color
========================================================================== */
$link-color: blue;
$link-hover-color: red;
$home-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$link-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z'/%3E%3C/svg%3E"), "#", "%23");
$home-icon-hover-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$link-hover-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 3h1v4h2v-2h2v2h2v-4.03l1 .03-4-3z'/%3E%3C/svg%3E"), "#", "%23");
.breadcrumbs .home-icon {
display: inline-block;
width: 1rem;
height: 1rem;
background: transparent no-repeat center center;
background-size: 100% 100%;
background-image: $home-icon-bg;
text-decoration: none;
color: transparent;
&:hover,
&:focus {
text-decoration: none;
background-image: $home-icon-hover-bg;
}
}