Bootstrap3, LESS and replacing the "/" in the breadcrumb with an IcoMoon font

[71ste...@gmail.com]

Love IcoMoon, more awesome than FontAwesome.

So... I’m trying to replace Bootstrap 3’s Breadcrumb “/“ with a caret-right icon from my IcoMoon font set.

This is the breadcrumb pattern: http://getbootstrap.com/components/#breadcrumbs

We’re using Bootstrap LESS and in variables.less file, the separator is indicator as such

@breadcrumb-separator: "/";

How do I replace the "/" with an IcoMoon font? I am able to display IcoMoon fonts on the website, btw.

Thanks!

[janc...@gmail.com]

Bootstraps CSS rule is using the default font-family of the document:

.breadcrumb > li + li:before {
padding: 0 5px;
color: #cccccc;
content: "/\00a0";
}

Assign it the name of your icon font-family and it's UTF8 character code. As an example:

.breadcrumb > li + li:before {
padding: 0 5px;
color: #cccccc;
font-family: "icons";
content: "\e006e"; // character code for arrow right
}
Theoretically you can enter the character code into the separator variable but I haven't tested that.

You can set the font family under preferences and lookup the character code of your desired icon in the Icomoon App.

[lindan...@gmail.com]

Thank you so much. Your solution works.

[srihar...@gmail.com]

Id didn't worked for me

[kadamv...@gmail.com]

Thank you :)