Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
use Open Iconic SVG definition to define an icon
/* ==========================================================================
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
- 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='' 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='' 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;
&:focus {
text-decoration: none;
background-image: $home-icon-hover-bg;

This comment has been minimized.

Copy link
Owner Author

donnamcmaster commented Jul 29, 2018

What I like about this solution is that there are no additional font or SVG files to include. Just this tiny bit of SVG path code for each icon.

I wasn't able to reproduce it with the "path" code from a Font Awesome SVG file. I don't know the guts of SVG code well enough to figure out why not. Perhaps someone else will find the key for that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.