Add Font Awesome icons to out-of-the-box lists using CSS (no JavaScript required!)

Bonus: another cool trick with data attributes… use CSS ‘before’ pseudo elements to add Font Awesome icons

This is something I once approached with JavaScript on load of the list. We can actually achieve the same result faster with CSS alone thanks to the useful clues / hooks that the Power Pages team leave us in the markup (which we can ‘hook onto’ with CSS)…

In this example, I’m going to prefix a Font Awesome icon next to each case in the List on the service page. (Note this is specific to Bootstrap 5. Power Pages sites on BS5 ship with Font Awesome 6’s Free collection):

The selector:

tr[data-entity="incident"] td > a.details-link

What this selector means is:

For lists where the Dataverse table is Case (the logical name is incident)
Get table cells where the details link (set in List actions) is directly in the cell (rather than the Actions drop-down menu)

Now to prefix / prepend that with a folder icon:

Head over to https://fontawesome.com/search?o=r&m=free and search for the icon you want.

Click the icon

A dialogue will pop up showing details of how to use / customise the icon…

Click the code in the Unicode section to copy it, like so:

And finally, here’s the full CSS snippet:

Note – I’ve added ::before to the selector as that’s all I want to style, not the link itself:

tr[data-entity="incident"] td > a.details-link::before {
    display: inline-block;
    text-rendering: auto;
    font-family: FontAwesome;
    content: "f0ad";
    margin-right: 0.7em;
    font-size: 1.15em;
}