XF 2.0 Custom Breadcrumbs

[myselfolli]

So I haven't really been able to work out how the breadcrumbs work in 2.0.

The customization I'm planning is really rather simple for the moment, I want to replace the "Home"-crumb with fontawesomes "house" (fa fa-home). This would of course require removing the text from the span that is the first crumb and then adding the corresponding classes to get the correct style. I could of course to that with JavaScript after the page is loaded, but that just feels sloppy.

Can anyone help me out please?

 

[myselfolli]

Alright, I kind of figured it out.

The original "Home"-Text I was able to remove using

.p-breadcrumbs li:first-child a span {
    display: none;
}

And since FontAwesome is essentially still a font (duh), you can get the Icons using CSS. Here's how I did it:

1) Get the Unicode String for the Icon you're trying to insert (http://fontawesome.io/cheatsheet/)
2) Edit your CSS

.p-breadcrumbs li:first-child a::before {
    content: "\f015";
    font-family: FontAwesome;
}

And that's literally it. Have fun I guess ^^