Portal: how to get icons to show in a list view?

[Benjamin Nuttin]

I have a widget in my portal, of type "Data Table from Instance Definition". It displays a bunch of tasks assigned to a user. These tasks can be of different types, so i want a visual hint of that - e.g. an icon in the left-most column, that's specific to the class of the task.

I've played around with adding icon or image fields to my records, and then displaying those columns in the view used by my widget, but only the name of the icon shows up, not the actual icon. Ideally I'm looking to see a glyph for each record. Something like:

Any idea?

Thanks!

[Deepak Ingale1]

Could you please share the code what you are trying to modify?

[Benjamin Nuttin]

It's really just the OOB data table widget - no custom code (so far)

[Benjamin Nuttin · Accepted solution]

I think I found a cheeky (though still reasonably OOB) way to do this...

1) Add to you list view a drop-down field that you want to use to drive the icons (could be a string, but needs to be a finite list of possible values)

2) Add CSS to the widget definition as follows:

td[aria-label="Slack"]:before,  td[aria-label="Pied Piper"]:before, td[aria-label="Rebel Alliance"]:before{
    font: normal normal normal 16px/1 FontAwesome;
}
td[aria-label="Slack"]:before{
    content: "\f198  ";
}
td[aria-label="Pied Piper"]:before {
    content: "\f1a7  ";
}
td[aria-label="Rebel Alliance"]:before {
    content: "\f1d0  ";
}

3) You can now see the icons showing up (only tested in Chrome):

Full list of icons can be found here

(FontAwesome should already be part of your Service Portal install)