在Bootstrap 3/Rails和HAML中使用glyphicon作为li项目符号

Question

我想做一个无序列表，每个列表项都带有glyphicon-ok而不是普通的小圆点。

我正在使用以下代码：

    %li.glyphicon.glyphicon-ok ok sign?

这段代码可以输出图标，但是文字（我猜测）显示的是 times new roman 字体。当我检查 CSS 时，它仍然显示字体为 "Glyphicon"。

我已经阅读了 HAML 不适合用于格式化内容，我猜这就是问题所在。

您有什么建议吗？我需要使用什么来使文本使用自定义字体但仍保留使用 glyphicons 的功能？

非常感谢。

- gorlaz

---

对于那些想要在纯HTML/CSS中完成此操作的人（而不是HAML），我在这里发布了一个类似的问题：https://dev59.com/SF0Z5IYBdhLWcg3wrB2H - Simon East

Answer 1

为什么要在li中写入文本，并使用glyphicon-ok图像作为背景？如果需要链接或其他任何嵌套内容，请将其放置在glyphicon li中。

%li.glyphicon.glyphicon-ok
  %span your text

然后，可以通过定位内部的span标签来使用自定义CSS。

或者，您可以使用一个包含li标签的span标签。

%span.glyphicon.glyphicon-ok
  %li your text

- Mandeep

---

你好用户，关于“为什么在li中写入带有glyphicon-ok图像作为背景的文本？”这个问题 - 我没有意识到我这样做了，我以前从未使用过glyphicons。你所说的“目标内部span以使用您的自定义CSS”是什么意思？您能否举一个CSS示例？我的custom.scss.css文件中是否真的是.span {font-family: x'}？ - gorlaz

如果你写了 "%li.gylphicon.glyphicon-ok 你的文本"，那么它会将 li 的背景图像应用为 glyphicon-ok 图像，并且你的文本将位于该图像之上，我认为你不想要这样的效果，所以更好的方法是将你的文本嵌套在其中。然后你可以给你的文本元素添加类或 ID，然后像普通元素一样对其进行定位，例如，如果你给它一个类 text，那么就写 .text{font-family: 你的自定义字体}。 - Mandeep

传奇 - 谢谢。我没有在span上放.text类。现在我得到的是; %li.glyphicon.glyphicon-ok %span.text 你的文本 - gorlaz