如何使用 Jade 标记 Bootstrap 字形图标？答案

【问题标题】：How can Bootstrap glyphicons be marked up using Jade?如何使用 Jade 标记 Bootstrap 字形图标？
【发布时间】：2014-09-29 11:10:35
【问题描述】：

我尝试在我的 HTML 中添加字形图标，重要的是我正在从 Jade 重新设计。

对于我尝试过的内部按钮字形图标：

button(ng-click='doLexycalValidation()').btn.btn-default 
    span.glyphicon.glyphicon-search
    | Evalular

对于我尝试过的桌子上的字形图标：

tr.table.table-hover
    td
    span.glyphicon.glyphicon-search
    | Evalular

但在这些中没有得到任何结果。我是这样从 CDN 导入 Bootstrap 的：

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css')
link(rel="stylesheet",href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css")

我怎样才能让它们正常工作？

【问题讨论】：

它适用于我fiddlesalad.com/jade/test-bootstrap-icons
如果您告诉您预期的 HTML 输出是什么，将会很有帮助

标签： node.js twitter-bootstrap pug

【解决方案1】：

你可以使用这个模块 JADE-Bootstrap http://rajasegar.github.io/JADE-Bootstrap/index.html

安装方式 => npm install --save jade-bootstrap

并像这样使用它

extends ../node_modules/jade-bootstrap/_bootstrap
block body
    button.btn.btn-success(type='submit') 
         +icon("plus") 
        | Add
    +a-btn-danger("#")
        +icon('remove') 
        | Remove

这个模块JADE-Bootstrap非常好，它让jade和bootstrap 3更容易协同工作。

【讨论】：