Add glyphicons to a Bread Crumb

Question

How can i add a bootstrap glyphicon into a Bread crumb?

I went into the bootstrap code and modified the "content" atribute, /e062 is the code of the glyphicon i want to use in bootstrap

.breadcrumb>li+li:before{
padding:0 5px;color:#ccc;content:"/e062"}

But the result is like this:

Item1 /e062 Item2 /e062 Item3 /e062

PD: Sorry for the posible grammar mistakes, but english is not my native language....And i can't post images because i must have at least 10 reputation

Answer 1

This is the way you use a 'Glyphicon` in your HTML.

<ol class="breadcrumb">
    <li><span class="glyphicon glyphicon-envelope"></span>Envelop</li>
    <li><span class="glyphicon glyphicon-print"></span>Print</li>
</ol>

With BootStrap3. you don't need to add any other CDNs Glyphicons are merged with Bootstrap. It is just enough if you have Bootstrap's CDN added to the head.

Answer 2

When you want to use glyphicon you have to add glyphicon class and then class of symbol that you want to use,like this

<span class="glyphicon glyphicon-plus">

so if you want to add directly content like this in css

.breadcrumb > li+li:before {
    padding:0 5px;color:#ccc;content:"/e062"
}

All you have to do add a class glyphicon on breadcrumb <li>.Your code should be like this.

<ol class="breadcrumb">
  <li><span class="glyphicon"></span>Home</li>
  <li><span class="glyphicon"></span>About us</li>
</ol>

Answer 3

Glyphicon's are just html characters displayed using the Glyphion font, so if you're using LESS or SASS it's pretty easy. You just need to find the HTML value of the icon you want and set the font-family to 'Glyphicons Halflings'. For example:

.breadcrumb {
> li {
    + li:before {
        font-family: 'Glyphicons Halflings';
        content: "\e072";
    }
}
}

Will give you the play icon (using SASS).