Page 1 of 1

Buttons with Icons

Posted: Thu Aug 22, 2013 7:22 am
by timssewell
Couple of questions about using icons as buttons

1. I can't see anyway of adding an icon to a button inherently, is as part of the buttons attributes, is that right?
2. I want to create a "button" that is essentially an icon, which when rolled over changes the background color and the icon color. I started to do this by putting an icon in a container and then putting a hover state on the container to change bg color which works, but I can't figure out how at the same time I can change the icon color?

Thanks

Tim

Re: Buttons with Icons

Posted: Thu Aug 22, 2013 9:56 am
by Nick Jennings
Hi,

1. There are a few ways you can have an icon and button synced, but buttons themselves do not have an option to have icons. You could either group the two, place them both into a container, or you could use Fill Image that has an image of an icon. If you use Fill Image, you would need to make an image exactly how you would want to the button to appear, as filling it will fill the entire button.

2. Since you used a container, you would want to have two icons, one for the default color and one for the hover color. Set the icon with the hover color to a state so that it is only visible when the container is hovered over. You would use the "On Hover" for the container to set the state. This will simulate the icon changing color when the "button" is hovered over.

If you have any questions, please let us know.

Re: Buttons with Icons

Posted: Thu Aug 22, 2013 3:45 pm
by Nick Jennings
Hi,

We did find an easier way to add an icon into a button using CSS. Here is an example code on how to set it up:

Code: Select all

#myButton button { background-image: url('/wa/asset?oid=75');
background-repeat: no-repeat;
background-position: right;
background-size: 24px 24px; }
Just change the attributes around to fit your needs.

Re: Buttons with Icons

Posted: Fri Aug 23, 2013 10:49 am
by timssewell
Thanks for sharing this, I will have a look.

To me this is one of the biggest shortfallings of protoshare as I am creating buttons with icons all the time, and I want to be able to easily control the image, hover over, active states etc.

Is this something thats on the roadmap at the moment?

Thanks

Re: Buttons with Icons

Posted: Fri Aug 23, 2013 1:53 pm
by Nick Jennings
Hi,

It is not on our roadmap as it has not been requested, but we will pass the suggestion along to our developers.