Changing Font Awesome Icons Using dmx-class changes?

Wappler General Need Help
1

I'm trying to change a font awesome icon from up to down if a condition is met. It doesn't seem to be working. I can successfully change the color of the icon, but not the icon itself. I must be fat fingering something. Here's the code...

I set a var at the top of my content page:

<dmx-value id="varVideoWeeklyChange" dmx-bind:value="-1"></dmx-value>

Later in the page:

<i class="fas fa-long-arrow-alt-up" dmx-class:fa-long-arrow-alt-down="(varVideoWeeklyChange.value &lt;= -1)" dmx-class:text-warning="(varVideoWeeklyChange.value &lt;= -1)"></i>

The color changes for me, but not the icon.

2

According to your class toggle, if the varVideoWeeklyChange value is less than -1 the class of your icon becomes:

fas fa-long-arrow-alt-up fa-long-arrow-alt-down text-warning

which makes no sense, as the fa-long-arrow-alt-down is just added after the fas fa-long-arrow-alt-up

Maybe you want to do something like:

<i class="fas" dmx-class:fa-long-arrow-alt-up="(varVideoWeeklyChange.value &gt; -1)" dmx-class:fa-long-arrow-alt-down="(varVideoWeeklyChange.value &lt;= -1)" dmx-class:text-warning="(varVideoWeeklyChange.value &lt;= -1)"></i>
3

Now that makes more sense! I took it for granted that Wappler would understand I wanted the up arrow class to be replaced with the down arrow class...but that was just silly. Thank you.

1 Like