将字形添加到面包屑中答案

【问题标题】：Add glyphicons to a Bread Crumb将字形添加到面包屑中
【发布时间】：2015-06-12 02:09:57
【问题描述】：

如何将引导字形图标添加到面包屑中？

我进入引导代码并修改了“内容”属性，/e062 是我要在引导中使用的字形图标的代码

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

但是结果是这样的：

项目1 /e062 项目2 /e062 项目3 /e062

PD：对于可能的语法错误，我深表歉意，但英语不是我的母语......而且我不能发布图片，因为我必须至少有 10 个声望

【问题讨论】：

标签： twitter-bootstrap breadcrumbs glyphicons

【解决方案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。您不需要添加任何其他 CDN，Glyphicons 与 Bootstrap 合并。如果你在头部添加了 Bootstrap 的 CDN 就足够了。

【讨论】：

从w3schools查看这个例子。它显示了您必须在代码的 head 部分中添加的链接或 CDN。

【解决方案2】：

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

<span class="glyphicon glyphicon-plus">

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

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

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

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

【讨论】：

如果你已经解决了你的问题，请接受对某人有用的答案:)
内容中不需要\反斜杠吗？

【解决方案3】：

Glyphicon 只是使用 Glyphion 字体显示的 html 字符，因此，如果您使用 LESS 或 SASS，这很容易。您只需找到所需图标的 HTML 值并将字体系列设置为“Glyphicons Halflings”。例如：

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

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

【讨论】：