Adding Icons to Labels and Buttons Video at Inductive University

Transcript

(open in window)

[00:00] Not only can you add HTML to labels and buttons, you can also add icons. So, typically, you want to use icons on screens to help operators understand what these buttons and what these screens are actually doing. So, typically, what people will do is actually go and use the image component and put the image component just to the left of your label or your button, or on top of the button for there to be an icon. But, you're using a separate component. So, rather than doing that, you can actually put it inline, on the label or button. If I click on the label here, for example, if I scroll down, there's a property called "Image Path", which is going to be the icon to show. I can actually go and browse for any image that I have. I'm going to go into the BuiltIn folder, to the Icons, go to 16, I'ma come down, I'm going to choose the lightbulb. Double click on that, it's going to set the Image Path, and you'll see that the image now exists inside of the label. And right now it's, of course, to the left-hand side of the label. At the bottom, we have alignment. We can actually align the text to the left of the image if we want to. We can also do vertical alignment. We can put the image anywhere we want in that label. So, I'm going to go ahead and put that to the text to the right of the label. So, now you can see I have a little tip I can have on the window. The button here, I can do the same thing as well. And a lot of times, you might want to put nice icons. Let user know, okay, that's going to save it to disk, or it's going to, you know, do this or do that. So, the button has also an Image Path property, which we can go and set. I'm going to go an browse my BuiltIn, Icons, 16. This time I'm going to go and use the disk for saving to disk. As you can see here, it's also to the left-hand side. You can change the alignment of that, where you want that icon to go. By using icons on components, it helps that window pop and have operators know what to do with those different areas.

Not only can you add HTML to labels and buttons, you can also add icons. So, typically, you want to use icons on screens to help operators understand what these buttons and what these screens are actually doing. So, typically, what people will do is actually go and use the image component and put the image component just to the left of your label or your button, or on top of the button for there to be an icon. But, you're using a separate component. So, rather than doing that, you can actually put it inline, on the label or button. If I click on the label here, for example, if I scroll down, there's a property called "Image Path", which is going to be the icon to show. I can actually go and browse for any image that I have. I'm going to go into the BuiltIn folder, to the Icons, go to 16, I'ma come down, I'm going to choose the lightbulb. Double click on that, it's going to set the Image Path, and you'll see that the image now exists inside of the label. And right now it's, of course, to the left-hand side of the label. At the bottom, we have alignment. We can actually align the text to the left of the image if we want to. We can also do vertical alignment. We can put the image anywhere we want in that label. So, I'm going to go ahead and put that to the text to the right of the label. So, now you can see I have a little tip I can have on the window. The button here, I can do the same thing as well. And a lot of times, you might want to put nice icons. Let user know, okay, that's going to save it to disk, or it's going to, you know, do this or do that. So, the button has also an Image Path property, which we can go and set. I'm going to go an browse my BuiltIn, Icons, 16. This time I'm going to go and use the disk for saving to disk. As you can see here, it's also to the left-hand side. You can change the alignment of that, where you want that icon to go. By using icons on components, it helps that window pop and have operators know what to do with those different areas.

We are experiencing playback issues from our video hosting provider. Please check back shortly.

LESSON LIST

Take topic challenge