Search code examples
javascriptbootstrap-4pug

Pug / Jade: add font-awsome button before list-group-item content

I'm trying to add a font-awsome icon before the list-group-item content inside a Pug iteration but cannot make it seem to work.

Getting the icon after the list-group-item content is easy, but how can I get it before (I've tried some methods without any success)?

- var x = list_content
.list-group.list-group
    each val in x
        .list-group-item=val
             i.fal.fa-chart-line.fa-fw        // this will generate the button after the content

How can this be done most efficiently?

Solution 
  • - var x = list_content
.list-group.list-group
    each val in x
        .list-group-item
             i.fal.fa-chart-line.fa-fw

             // prefixing equal sign does the trick
             =val

             // or use piped text plus string interpolation
             | #{val}