添加glyphicons面包屑

我如何将自举图形添加到面包屑中?

我进入bootstrap代码并修改了“内容”属性,/ e062是我想在引导程序中使用的glyphicon的代码

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

但结果是这样的:

Item1 / e062 Item2 / e062 Item3 / e062

PD:抱歉,可能的语法错误,但英语不是我的母语....而且我不能张贴图像,因为我必须至少有10个声望


这是您在HTML中使用“Glyphicon”的方式。

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

使用BootStrap3。 您不需要添加任何其他CDN Glyphicons与Bootstrap合并。 如果您将Bootstrap的CDN添加到头部,这就够了。


当你想使用glyphicon时,你必须添加glyphicon class,然后添加你想要使用的符号类,就像这样

<span class="glyphicon glyphicon-plus">

所以如果你想在CSS中直接添加这样的内容

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

你所要做的就是在breadcrumb <li>上添加一个类图形。你的代码应该是这样的。

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

Glyphicon只是使用Glyphion字体显示的html字符,所以如果您使用LESS或SASS,它非常容易。 你只需要找到你想要的图标的HTML值,并将字体系列设置为“Glyphicons Halflings”。 例如:

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

会给你播放图标(使用SASS)。

链接地址: http://www.djcxy.com/p/39091.html

上一篇: Add glyphicons to a Bread Crumb

下一篇: Woocommerce Breadcrumbs not displaying full path