Buttons with Icons

Put your questions here on how to do things in ProtoShare.
timssewell
Posts: 29
Joined: Mon Aug 19, 2013 8:40 am

Buttons with Icons

Postby timssewell » Thu Aug 22, 2013 7:22 am

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

Nick Jennings
Posts: 165
Joined: Mon May 14, 2012 12:06 pm

Re: Buttons with Icons

Postby Nick Jennings » Thu Aug 22, 2013 9:56 am

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.
Nick Jennings
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

Nick Jennings
Posts: 165
Joined: Mon May 14, 2012 12:06 pm

Re: Buttons with Icons

Postby Nick Jennings » Thu Aug 22, 2013 3:45 pm

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.
Nick Jennings
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare

timssewell
Posts: 29
Joined: Mon Aug 19, 2013 8:40 am

Re: Buttons with Icons

Postby timssewell » Fri Aug 23, 2013 10:49 am

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

Nick Jennings
Posts: 165
Joined: Mon May 14, 2012 12:06 pm

Re: Buttons with Icons

Postby Nick Jennings » Fri Aug 23, 2013 1:53 pm

Hi,

It is not on our roadmap as it has not been requested, but we will pass the suggestion along to our developers.
Nick Jennings
customerservice@protoshare.com
Site9, Inc. / Customer Support
blog.protoshare.com | twitter.com/protoshare


Return to “How Do I...”

Who is online

Users browsing this forum: No registered users and 1 guest

cron