Hello everyone, I have a textarea with a BackgroundImage (icon) with the following props.
I have 2 questions about the icon.
1: How can I change the color of the icon?
2: How can I assign a fixed size to the icon because no matter what BackgroundSize I choose, it remains the same size in the session.
Designer:
Session:
I just want the Icons like the upper two in this picture:
You forgot to specify the units for the background-size property so that the image size you want is applied (for example, px, cm, mm, in, %, vh, etc.). Now, for the color of the icon, I think the simplest thing will be for you to create your own icon and change its color to the one you like, or take that Ignition icon and change its color within another software like Inkscape.
You could also use background-position to place the icon where you want, for example:
/* Position the background image 10 pixels from the left and 20 pixels from the top of the element */
.my-element {
background-position: 10px 20px;
}
At some point it might just be easier to use a separate component for the icon and make it look like it's part of the input field.
You can quite easily put an icon and a text field side by side in a container, remove the border on the text field and put it on the container instead.
That's correct, but I'm using a CoordinateContainer with Props.mode: percent, and then the size of the icon changes in parallel to the window.
Thank you for the tip, I'm now using the unit px and the size fits now. Do you know a simple way how I can change the color of the icon and upload it?
I believe @pascal.fragnoud suggestion is the most accurate one; it's easier and simpler to use an icon component in combination with the text area to achieve what you want. However, if you still want to do it using only the text area component you migth need to do the following.
To find that icon (I think or assume you are using the icons included with Ignition), you will have to search for the icons within the Ignition documents that were installed on the server containing Ignition (I don't know if in your case you have access to the server where Ignition was installed). Another option would be to get another icon or make your own. I recommend looking for an icon in .svg format, as this format works with vectors (It's easier to change the color of a vector than in other types of formats).
Once you have found the icon you are looking for, you will have to change its color to the desired color. I use Inkscape to work with vectors (it is a free and open-source vector graphics editor), there are endless tutorials on YouTube on how to use Inkscape. Here is an example for you:
You could also use a flex with the icon and input field in it, set the icon's marginRight to -40px or something to push it into the input field. If you run into the icon being behind the input field, move it to the right and use marginLeft set to -100% +5px possibly. Completely untested