You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
Supplemental Videos
-
1:15Adding Icons to Labels and Buttons
-
1:43Color SVG Dynamically
-
2:39Tint SVG
-
1:45Tank Cutaway
-
2:17Component Animation
LESSON
Adding Icons to Labels and Buttons
Description
Learn how to add an icon or image of your choice to Label and Button components.
Video recorded using: Ignition 8.1
Transcript
(open in window)[00:00] In this lesson, I'll show you how to add icons to labels and buttons within your Vision project. Now, one option is to add an image component and position that to the side of your label or button, but there's another option that doesn't require adding additional components to your window. If we take a look at the properties on this label, I have here we can see that there's an Image Path property that allows us to add an icon straight to the label. I'll click the folder search icon and go to Built-in, Icons, 16, and I'll select the help icon. You can also modify the text alignment on this label and this will decide where the text is relative to the icon. If I switch the Horizontal Text Position property to left and that will move the text to the left of the icon. If we look at the button's properties, there's the same Image Path property that we can use here. I'll click the folder search icon go to Built-in, Icons, 16, and this time I'll pick the stop icon.
[01:03] As you can see adding icons to your labels and buttons in a vision window is a simple way to spruce up your windows and add visual cues for your users.