使用字体超棒的图标而不是项目符号动态创建列表

Question

由于这是我第一次使用 Jade，我遇到了很多问题。

我的目标是：

我有一个带有一堆票的简单服务器。这些工单旨在作为一个简单的列表提供，左侧有一个图标指示该工单的状态（例如关闭或打开）。为此，我想将 Jade 与 Node.js' Express 框架一起使用。

这是我到目前为止尝试过的方法：

翡翠布局

<!-- layout.jade -->
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/src/style.css')
    link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
  body
    block content

主要玉器文件

<!-- index.jade -->
<!-- index.jade -->
extends layout

block content
    ul
        each ticket in tickets
            li
                - const status = ticket.status === 'file' ? ['fas', 'fa-file-alt'] : ['far', 'fa-folder-open']
                i(class=status)
                a(href='#')= ticket.description

问题是这给出了一个奇怪的框，就像图标不存在一样。

结果是这样的：

如何解决图标不显示的问题？

感谢帮助。谢谢

Answer 1

我想你弄错了 class 个名字：

p Test
  |  ##
  span.fas.fa-file-alt
  |  !! 
  span.far.fa-folder-open
  |  ##
-
  const tickets = [ 
    { status: "file", description: "Hello World"},
    { status: "x", description: "test"}]
each ticket in tickets 
  li(style="list-style-type:none")
    - const status = ticket.status === "file" ? [ "fa", "fa-file"] : [ "fa", "fa-folder-open"]
    i(class=status)  
    | &nbsp;
    a(href="#")=ticket.description

产生：

Fontawesome css 文件的 link 必须存在。我尝试了 4.4 和 4.7 两个版本，结果是一样的。

使用字体超棒的图标而不是项目符号动态创建列表

Dynamically creating lists with font-awesome icons instead of bullet points

node.js

pug