Dynamic Font Awesome icons based on database output

Wappler General How To
#1

Hi there,

I have a database, that lists a number of industries, and also a Font Awesome icon name in the next column.

What I’d like to do within a repeating group is display the appropriately named FA icon in each record.

I’ve tried a few ways now, and wondered if this is possible:

  1. Using the class Toggle - I cannot change the ‘name’ in Class Toggle with a data picker / binding from the DB output
  2. Manually changing the later part of the icon name (e.g. the part after ‘fas’) with the name of the relevant field from the repeat group bindings, e.g.
  3. I’ve tried Dynamic Attributes inner text and inner html - naturally inner text wasn’t going to work, I was optimistic about inner html and used both and tags to reference the FA icon.

As a last resort, I can download the icons themselves and display them that way with a URL, but as we are already using the CDN - this would be a more ideal solution.

Any ideas?

#2

Yep, I’ve got this working no worries. Including a dynamic colour as well.

So in my DB I’ll have a table/field with something like fa-star-half-alt which is the code needed in Wappler.

Then in Wappler, you’ll need a query that gets that data so you can use the dynamic picker. You’ll then need to use Inner HTML like this:

<td dmx-html="'<i class=&quot;fas fw fa-lg '.concat(icon)+'&quot;></i>'" dmx-style:color="colour"></td>

In the above case that is is a repeat table, the .concat(icon) is the name of the field from the query and the colour you see is from a DB field in the query called colour.

End result:

image
image1151×353 16.9 KB

You wount get this working with just the UI picker, but it looks cleaner in there, like this:

image

#3

You can just use inner HTML for this, example:

dmx-html="'<i class=&quot;fas fw fa-lg' + dynamic_icon_value + '&quot;></i>'"
1 Like
#4

Yep, That also works. When I did it I couldn’t seem to get it to work that easily and the .concat() worked in the end.

Teo’s solution is cleaner though and confirmed to work for me now:

<td dmx-html="'<i class=&quot;fas fa-lg fw ' +iconName +'&quot;></i>'" dmx-style:color="flagColour"></td>
#5

Thank you for this Teo.

Unfortunately the data in our column for all the icons is annoyingly missing the ‘fa-’

So instead of ‘fa-plane-alt’ which is correct, we have ‘plane-alt’.

This is data from our original implementation, so I assume they just appended fas fa- to the beginning to make these work.

In your suggestion, I’ve tried the following without luck.

<div class="col" dmx-html="<i class=&quot;fas fw fa-lg' fa- +icon + '&quot;></i>"></div>

<div class="col" dmx-html="<i class=&quot;fas fw fa-lg' fa-+icon + '&quot;></i>"></div>

What would you recommend for me to be able to apend the ‘fas fa-’ infront of the icon names from our DB?

#6 
<div class="col" dmx-html="<i class=&quot;fas fw fa-lg fa-' + icon + '&quot;></i>"></div>
1 Like
#7

It would work fine with what Teo or I wrote.

Just have the prepopulated bit with ‘fas fa-’ and then add your value after that.

Just make sure there’s no space and it will be fine. If you can’t seem to get rid of the space, try the concat() version I posted.

#8

Thank you @Philip_J, @UKRiggers and @Teodor - haven’t got back to this yet, but I’m grateful for all your responses and will no doubt be able to solve it with your responses.

#9

Hey @Teodor returned back to this after a couple of months as we are fine tuning some of the UI before going live, fingers crossed next week.

I still can’t get this working! I wonder if you wouldn’t mind taking a look at the code to see what might be going wrong?

Here is the code in Wappler:

<div class="border border-secondary bg-light text-primary h64 w64 text-center col-12 pt-0 pb-0 align-self-center" style="height: 64px; min-width: 64px; width: 64px;" dmx-html="'<i class=&quot;fas fa-' + icon + '&quot;></i>'"></div>

Here is how it renders on the page:

Screen Shot 2020-11-27 at 3.43.21 pm
Screen Shot 2020-11-27 at 3.43.21 pm724×274 35.9 KB

So everything looks A OK. But it just won’t render on the actual page!! Any ideas?

#10

So is this screenshot from chrome dev tools or something?

It definitely looks like it should work. That FA code is part of the normal free package. Do you have other icons on that page that are working? i.e. are the Font Awesome scripts/files etc being loaded properly on that page?

I tried that code in my own app and it works (i just needed to replace the icon for the text though)…so it would seem its something to do with the dynamic element but based on the rendered code it seems to be working

1 Like
#11

Thanks @Philip_J - I was concerned it was something else, appears as though it must be. If I use the standard Wappler FA elements, it renders fine on the page - it’s just this dynamic value that isn’t rendering.

I’ll try and debug further

#12

Your issue, I believe, is the two single quotes next to each other that look like double-quotes.

You would be best to escape some of the single quotes

For my example I used a variable like this

<dmx-value id="icon" dmx-bind:value="'hard-hat'"></dmx-value>

and then I escaped some of the single quotes like this

dmx-html="'<i class=\'fas fa-' + icon.value + '\'></i>'"

which results in this. The escaped single quotes are the ones left in the final html

<i class='fas fa-hard-hat'></i>

image

Hope this helps

#13

Thanks!

I tried this and still no luck. What’s strange is that how it renders in the HTML is the same as when I check the HTML of a working icon.

It must be something to do with it appearing in a repeat group or something.

#14

I have some inside repeating groups for what its worth. Here’s my code:

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="sc_summary.data.flags" id="tableRepeat1" dmx-state="query_flags" dmx-sort="sort" dmx-order="dir">
 <tr>
<td dmx-text="name"></td>
<td dmx-text="description"></td>
<td dmx-html="'<i class=&quot;fas fw fa-lg '+ icon +'&quot;></i>'" dmx-style:color="colour"></td>

Which renders like this in chrome dev tools:

image

1 Like