Response title
This is preview!
Move this topic
Using alternate button icons
in jQuery Mobile
•
11 years ago
If I use in a listview
<li data-icon="arrow-d">
It changes the default right arrow into a down arrow using the global icon color.
If I use
<li data-icon="alt">
I suddenly get a PLUS icon using the alternate color.
How do I combine these to get an icon using the alternate color that is not the PLUS sign?
1
Replies(11)
Leave a comment on jasonleeholm's reply
Re: Using alternate button icons
11 years ago
I find no documentation on using "alt" as a value for data-icon.
Maybe you stumbled into some future feature that's half-done?
Or, do I misunderstand you? Are you trying to use your own icon called "alt.png"?
If you want a different color, you can use data-theme.
Maybe you stumbled into some future feature that's half-done?
Or, do I misunderstand you? Are you trying to use your own icon called "alt.png"?
If you want a different color, you can use data-theme.
Re: Re: Using alternate button icons
11 years ago
Yeah, I just stumbled upon the "alt" value, and thought maybe I could take it further. There is info in the css where it references both the selected icon png as well as an "alt" version -- but it doesn't seem like it uses it anywhere. I was hoping you could toggle between them with an option.
As for the colors, the icon color seems to be a global change -- all themes either use the white or the black icons, and you can't make two themes each using different icon pngs.
As for the colors, the icon color seems to be a global change -- all themes either use the white or the black icons, and you can't make two themes each using different icon pngs.
Leave a comment on watusiware's reply
Re: Using alternate button icons
11 years ago
I'm not sure if I'm understanding what you want exactly...but, you should be able to define two custom icons using your own images (in whatever color you want). Then, in the logic that decides whether to use one theme or the other, you would just need to also make it decide which custom icon to use and set it accordingly.
Edit: I use a couple custom icons in my app and just complement the automatic JQM custom icon functionality with a custom CSS class if I want to alter the opacity of the overlay or anything else I can do with CSS.
Oh, and by the way, if there is any kind of issue with how you've implemented the custom icon, it will default to the PLUS sign. I've run into that more than a few times.
Re: Re: Using alternate button icons
11 years ago
By default, you set the white or black set globally, and it only uses one of those on the whole site. But the css loads both of them, then ignores the non-globally-set png. What I want is to use the black icons for say, half the themes, and then use the white icons for the other half. Since the icon png is set globally, I can't figure out how to change it per theme, but I don't think there is an official way to do that, and what I stumbled on might have been a first step to implementing that feature in the future.
Leave a comment on dcarrith's reply
Re: Using alternate button icons
11 years ago
The default set of icons has two of each icon. One on a black background, one on a white background.
You can globally set which set of icons to use.
You can globally set which set of icons to use.
Re: Re: Using alternate button icons
11 years ago
yep, that's what I've found, but it seems it does load both sets in the css, since using the "alt" value displays the plus in the set not used globally. Seems like it SHOULD allow both to be used and just toggle between them, at least per theme (Ok, 90% of the buttons will use the global icon set, but THIS theme uses dark buttons, so I'd like to toggle to the light icons just in this theme).
Leave a comment on watusiware's reply
Re: Using alternate button icons
10 years ago
Hello Jason,
Did you find a fix to this please?
I have the same problem where I need to use the white icon set instead of the black ones for a change.
jQuery mobile themeroller doesn't let you choose a different icon set depending on what your button color scheme is in the theme. (dumb i know).
I get the plus sign on every button as I am trying to use:
data-icon="arrow-r ui-icon-alt"
I'm getting over jQuery mobile very very quickly ;)
Thank you
Leave a comment on samesies's reply
Re: Using alternate button icons
10 years ago
Sadly, no... however I did find that if you're not a top-level programmer and things like this in jQuery mobile frustrate you to the point that you start making Pulp Fiction rants in emails... it might start the process for dismissal. Live and learn...
Leave a comment on jasonleeholm's reply
Re: Using alternate button icons
10 years ago
haha 
Ok I'll take that advice. I think my boss has pretty much heard every rant under the sun from me about various things including jQuery mobile, IE6 & 7, microsoft and I have invented some good curse word combinations that defy logic so I think I am clear.
Thanks for the speedy reply.
Good luck with it all. I decided simply not to include the logos in the buttons as I couldn't work out that alt-icon deal and don't want to hack the theme or use too many over-rides.
Take it easy.
James
Leave a comment on samesies's reply
Re: Using alternate button icons
10 years ago
I ran into an issue trying to use a custom theme with alt icons (i.e. black). I have a few custom icons in my application, and I was hoping that the button widget would magically switch to my alt colored icons as long as I specified the proper ui-icon-alt CSS rules along with the CSS rules for my custom icons. That is not the case though. It looks like they started trying to implement that, but it must still be in progress. So, I did a diff of the two versions of my custom theme.
The only difference between the two custom theme files is as follows. This is the global ui-icon rule for the custom theme in which I left the default icon set (i.e. white):
- .ui-icon,
- .ui-icon-searchfield:after {
- background-color: #666666 /*{global-icon-color}*/;
- background-color: rgba(0,0,0,.4) /*{global-icon-disc}*/;
- background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
- background-repeat: no-repeat;
- -webkit-border-radius: 9px;
- border-radius: 9px;
- }
And, here is the global ui-icon rule for the custom theme in which I specified to use the alt icon set (i.e. black):
- .ui-icon,
- .ui-icon-searchfield:after {
- background-color: #ffffff /*{global-icon-color}*/;
- background-color: rgba(255,255,255,0.25) /*{global-icon-disc}*/;
- background-image: url(images/icons-18-black.png) /*{global-icon-set}*/;
- background-repeat: no-repeat;
- -webkit-border-radius: 9px;
- border-radius: 9px;
- }
As you can see, the jquery theme builder is simply replacing the image sprite used as the background-image for the global class .ui-icon.
So, for me to use "alt" icons for my custom icons, I still had to define the appropriate CSS rules to support standard resolution and hd displays, but I also had to manually add the class "ui-icon-alt" to all of the buttons that are using custom icons. That's not what I was expecting, but I guess it's still easy enough.
So, back to the original question of this post, I think to use alt colored icons on a specific button, you would just have to add class="ui-icon-alt" to the element. So, using the original example form the OP, it might look something like this:
- <li data-icon="arrow-d" class="ui-icon-alt">
Leave a comment on dcarrith's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jasonleeholm's question