Adding Icons using HTML and CSS

Community Usage questions
1

Hi, I only have a fairly basic level of HTML and CSS, and I wanted to know how to add icons without the ^shorthand.

I have a switch divided into many sections. I want to place a specific icon in one of the sections.

I've added to the HTML of the widget.

How in CSS do I place this icon in the nth-Child(12) section of the switch?

Cheers

2

Hello,

No sure why you don't want to use the ^icon syntax, but can use it in the switch object key label.
Using only CSS is quite tricky, you have to use background with an url as explained in this link:

Try this on the switch values prop:

{
  "Value 1": 1,
  "Value 2": 2,
  "^play Value 3": 3
}

This will add a play icon to the third switch label.

3

There was a bug when using the switch values as an array, and placing it in there. When I clicked on the switch with that icon, it wouldn't work properly. That's why I was wondering if there was another fairly simple way to add an icon in a menu or switch, but it does seem complex.

4

Oh, what a coincidence!
Check this fresh thread :slight_smile:

1 Like