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

Question

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

我的目标是:

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

到目前为止，这是我尝试过的:

Jade 布局

<!-- 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

主 Jade 文件

<!-- 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

我认为你弄错了类名:

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)  
    |  
    a(href="#")=ticket.description

产生:

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