Question

如何在面包屑中添加bootstrap glyphicon？

我进入了自举代码并修改了＆＃34;内容＆＃34; atribute，/ e062是我想在bootstrap中使用的glyphicon的代码

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

但结果是这样的：

Item1 / e062 Item2 / e062 Item3 / e062

PD：对于可能的语法错误，我很抱歉，但英语不是我的母语....我不能发布图像，因为我必须至少有10个声誉

Answer 1

这是您在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。您不需要添加任何其他CDNs Glyphicons与Bootstrap合并。只要将Bootstrap的CDN添加到头部就足够了。

Answer 2

当你想使用glyphicon时，你必须添加glyphicon类，然后添加你想要使用的符号类，比如

<span class="glyphicon glyphicon-plus">

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

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

您只需在面包屑<li>上添加一个类glyphicon。您的代码应该是这样的。

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

Answer 3

Glyphicon只是使用Glyphion字体显示的html字符，所以如果您使用LESS或SASS，它很容易。您只需要找到所需图标的HTML值，并将font-family设置为＆＃39; Glyphicons Halflings＆＃39;。例如：

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

会给你播放图标（使用SASS）。

将glyphicons添加到Bread Crumb

3 个答案: