How do i change the jquery icons color

Question

I'm using Jquery mobile icons. I have a little confusion here to change the actual icon color to red and background to white. See below html code.

<div data-role="page"><div data-role="content">
<a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext">  </a</div></div>

Such that the icon should be as follows

Icons should be like this

See JS FIDDLE HERE

Find the elements to be changed, in this case .ui-btn-icon-notext .ui-btn-inner .ui-icon {margin: 2px 1px 2px 3px;float: left;} (this is default), add background-color: #ff0000; here put these in ext style sheet and add it to your head(after the jquery default css file), another solution is make a custom class forex class="mybtn" define your css and put !impotant into it. — MixedVeg, Dec 18 '14 at 06:47
Also you can use "style=background-color:red" inside {find this span tag using browser inspector} — MixedVeg, Dec 18 '14 at 06:52
You can change background's color with css. To change SVG's icon color, you need to to modify JQM style sheet, icon by icon. — Omar, Dec 18 '14 at 07:23
@Omar as you posted the link i just pointed the fallback, what if in case that's it. — Jai, Dec 18 '14 at 07:37

Faridoon · Answer 1 · 2014-12-18T06:43:02.517

-1

You need to add a data-theme attribute, and you can create themes using jQuery Mobile themeroller. Here is the fiddle with a different color.

     <a href="#" data-role="button" data-icon="home" data-inline="true" data-iconpos="notext" data-theme="b"></a></div>

If you don't want to create your own themes for jQuery Mobile, then use an inspector and find the right element, then add css to it. For example:

.ui-btn-icon-notext .ui-btn-inner .ui-icon {
      background-color: #111;
 }

Update: You have to create your own icon and then change the icon background image:

.ui-btn-icon-notext .ui-btn-inner .ui-icon {

    background: url(http://png.findicons.com/files/icons/2165/office/48/home_01.png);
    background-size: 17px;

}

edited Dec 18 '14 at 06:43

answered Dec 18 '14 at 06:30

Faridoon

154
2
4
8

I would like to change the icon color to red see image above – Murali N Dec 18 '14 at 06:34
I updated my answer. I hope it helps you. You will have to create icons in the color(s) you want. – Faridoon Dec 18 '14 at 06:43

How do i change the jquery icons color

1 Answers1