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

Question

Since this is my first time working with Jade, I am having a lot of issues.

My goal is this:

I have a simple server with a bunch of tickets. These tickets are meant to be served as a simple list, with an icon on their left indicating the status of that ticket (e.g. closed or open). I would like to use Jade for this along with Node.js' Express framework.

Here's what I tried so far:

jade layout

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

Main jade file

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

The problem is that this gives a weird box like the icon doesn't exist.

This is what the result looks like:

How can I fix the icon not showing up?

Help appreciated. Thanks.

[https://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and](https://stackoverflow.com/questions/7698764/custom-bullet-symbol-for-li-elements-in-ul-that-is-a-regular-character-and) — Ricky Mo, Oct 27 '21 at 04:49

Old Geezer · Accepted Answer · 2021-11-03T14:24:14.200

I think you got the class names wrong:

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

produces:

The link to the Fontawesome css file has to be there. I tried with both versions 4.4 and 4.7 and the results were the same.

Big help. Thanks so much! – divinelemon Nov 03 '21 at 22:08 — divinelemon, Nov 03 '21 at 22:08

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

1 Answers1