Incorporate a Font Awesome button in front of the content of each list group item in Pug/Jade

I'm struggling to insert a Font Awesome icon before the list-group-item content within a Pug loop, but I can't seem to make it work.

Adding the icon at the end of the list-group-item content is straightforward. How do I position it in front (I have attempted various methods with no 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 create the icon after the content

What is the most efficient way to achieve this?

javascriptbootstrap-4pug

Answer №1

- let items = list_content
.list-group.list-group
    each value in items
        .list-group-item
             i.fal.fa-chart-line.fa-fw

             // adding equal sign to show variable value
             =value

             // or combining piped text with string interpolation
             | #{value}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom dropdown feature in Vue-tables2

Is there a way to customize the select dropdown style in vue-tables2 table? I am trying to change the entire template of the dropdown, not just add CSS classes. My custom template includes additional elements like span and div tags that need to be incorpor ...

javascriptvue.jsvue-tables-2

Clicking to Load Images - Angular

Implementing a feature to load sets of images on button click instead of loading all at once. Although lazy load plugins are available, I decided to experiment with this approach. Here's the logic: Start with a data array called 'Images' co ...

javascriptangularjs

Dynamic content in a CSS animation that rolls credits as they scroll

Currently, I'm working on creating a credit scrolling effect that pulls data from the JustGiving API to display a list of donors. I have successfully populated the list of donors and connected to the API without any issues. However, the challenge lies ...

javascripthtmlcsscss-animations

Analyzing DynamoDB Query

I am on a mission to recursively analyze a DynamoDB request made using the dynamo.getItem method. However, it seems that I am unable to locate a similar method in the DynamoDB SDK for Node.js. You can find more information about DynamoDB SDK at http://do ...

javascriptjsonnode.jsamazon-web-servicesamazon-dynamodb

Guide on transferring numerous files (50k+) from a folder to AWS S3 using node.js

Currently, my Node.js API on a Windows machine is generating numerous XML files that are later sent to an S3 bucket. The quantity of files sometimes surpasses 50k. For the uploading process, I am utilizing the aws-sdk package. Essentially, I iterate throu ...

javascriptnode.jsasynchronousamazon-s3npm

Storing multiple items in an array using LocalForage

I have a challenge where I need to add multiple items to an array without overriding them. My initial approach was like this: localForage.getItem("data", (err, results) => { console.log('results', results) // var dataArray ...

javascripttypescriptionic2localforage

The VueJS application's Vuex Getter appears to display as an empty array, yet when utilizing console.log, it reveals itself as an object containing all the corresponding values

Here's the method I'm using, it's pretty straightforward. DailyCountTest: function (){ this.$store.dispatch("DailyCountAction") let NewPatientTest = this.$store.getters.NewPatientCountGET console.log(NewPatientTest) } The getter ret ...

javascriptarraysvue.jsvuex

Why is the Zip archive downloader not functioning properly when using Node.js and Archiver (Unexpected end of archive error)?

Looking to download multiple files using archiver with express. The server should respond to a post request from the client by sending a .zip file. However, there seems to be an issue where WinRAR displays an error message "! 98I9ZOCR.zip:Unexpected end of ...

javascriptnode.jsexpresszip

JavaScript - Need to automatically scroll to a different div when scrolling occurs

Currently, my focus is on creating a single-page website where the main content is displayed in large boxes arranged vertically down the page. If you have any suggestions or thoughts on using JavaScript to navigate to each content box more efficiently, I ...

javascriptjquery

Stop Caching with Jquery Infinite Scroll (IAS)

I am using jQuery + IAS to implement infinite scroll functionality on my website. However, I have encountered an issue where the cache is being disabled when making requests for new content. Specifically, the URL that is accessed to retrieve the next page ...

javascriptjquerycachingscrollias

Can object methods be called using inline event attributes in an HTML tag?

Exploring the depths of core JavaScript has been my latest obsession. It's fascinating how we can easily trigger functions within the global context using events like this. HTML <span class="name" onclick="clicked()">Name</span> JavaSc ...

javascriptjqueryhtml

Navigating the way: Directing all TypeScript transpiled files to the build folder

I am currently working on a project using Angular2/Typescript, and I have the tsconfig.js file below: { "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es5", "sourceMap": true, ...

javascriptangulartypescript

Having trouble with proper routing using node.js, socket.io, and the __dirname variable

As a newcomer to node.js, I am struggling with creating a basic route to read a file using node.js and socket.io. The solution may be straightforward, but I feel like I'm missing some fundamental concepts here. var http = require('http' ...

javascriptnode.jssocket.io

The select2 plugin seems to be having trouble recognizing the Li click functionality

I have a select menu that is using the select2 plugin. I am trying to add a class to the <select> element when a menu option is clicked, but it doesn't seem to be working as expected even after testing with an alert. https://jsfiddle.net/ysm4qh ...

javascriptjqueryhtmlcssjquery-select2

Transforming javascript's array.map into php's array_map function

The following code snippet is written in JavaScript and consists of a hashmap array with keys and values. I have created a function using map that returns the values of the entered keys. var rule = { "c": "d", "a": "o", "t": "g", "h": "a", "e": "n", "n": ...

javascriptphparrays

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

javascriptonkeydown

Generate a binary string using JavaScript and then transform it into C#

I have an upload section in my JavaScript program. I utilize JS FileReader to obtain a binary string of the uploaded document before sending it to my C# WebApi for storage on the server. JavaScript Code let myFile = ev.target.files[0]; if(myFile.size > ...

javascriptc#typescriptfilereader

Using PHP to track the number of clicks on a specific div element

Although I am not well-versed in javascript, I have incorporated it into my website to enhance its appearance. One of the features I've added is a popup that appears when a user clicks on a specific div element to display additional information. In ad ...

phpjavascript

The type 'number[]' is lacking the properties 0, 1, 2, and 3 found in the type '[number, number, number, number]'

type spacing = [number, number, number, number] interface ISpacingProps { defaultValue?: spacing className?: string disabled?: boolean min?: number max?: number onChange?: (value: number | string) => void } interface IFieldState { value: ...

javascriptreactjstypescript

Checking the authenticity of Javascript Objects containing date values

What is the best way to validate a JavaScript Object that includes date fields? While there are JSON validators such as tv4 that can check the format of string dates, our business logic operates with JavaScript Date instances which these validators do not ...

javascriptjsonvalidationjsonschema