Stuck with FontAwesome icons and using them

I'm posting here (now) in an attempt to avert Sod's law.

I want to use this icon:
(Link)
https://fontawesome.com/icons/classic/solid/lips

I'm short and understanding it is over my head.

I'll try to understand it, but as said at the start:
If I don't post the question, I (maybe) won't shoot myself in the foot and understand it.

Oh, Back story

I have messages and a MUTE option is needed for some.
OK, the lips aren't exactly the best, but if I overlay the ban icon... It kinda conveys the meaning.

I'm open to alternatives.

Font awesome, Material Design. Not partial.

Where do you want to use it?

Local machine, local dashboard.

NR 4.0.9
Dashboard 1.x

I think icons in this list (FA 4.7) are supported by Dashboard 1. Here are a few that may work for “mute”.


Hope this helps.

That is one of the "pro" set. You need to buy a pro license to use it.

There are alternatives. This is the first one I found:
https://www.svgrepo.com/svg/303803/lips

Download and use as an SVG image.

Super big hugs.

That is great.

Ok, I have the svg file and I can use it. But positioning it is seeming a bit tricky.

Screenshot from 2026-07-31 10-59-56

and

Screenshot from 2026-07-31 10-59-44

First one ok.

The second one (in red) seems a bit high.

This is a ui_button ode.

But it isn't as simple as that.

(Obviously) :wink:

The details are sent to the node as msg.txt and msg.colour

colour is the background colour.
txt is the icon.

Here's what I have for both.

<span class="fa-stack"> <img src="/Pictures/lips.svg" class="fa-stack-1x"> <i class="fa fa-ban fa-stack-2x"></i> </span>

and

<span style="display:inline-flex;align-items:center;height:100%;transform:translateY(2px);"> <img src="/Pictures/lips.svg" width="22" height="22"> </span>

The square size is 42 x 42 pixels in the dashboard settings.

Off topic - kinda.
The meaning/s are: Mute and non-mute.
I'm stuck being happy with which is which and the colours used.
Thoughts?

Maybe check the default styling of the img tag, probably has margins.

You could likely embed the SVG code directly. This should give you more styling options.