CODEWITHSUNDEEP
jquerymobilebuttoniconsnav
Lukas
Lukas

Reputation: 1366

Resize Button Icons in Jquery Mobile

I recently built a web app using jquery mobile sdk. Everything work's like a charm, but now i want to resize a navbar button, to fit the navbar, which has been resized to 44px instead of the 32px. I used the following code to create the button.

<div data-role="header" data-position="fixed" class="header-custom">
        <a href="#" class="ui-btn-right" data-icon="refresh" data-iconpos="notext" id="refreshButton">Refresh</a>
    </div><!-- /header -->

My aim is to resize the button (and also the icon! :) ) to fit again into the new custom header.

Upvotes: 2

Views: 3050

Answers (2)

marcel
marcel

Reputation: 412

You have a possibility to resize the icons! Have a look into the jquery.mobile.icons.min.css file. There are the icons defined as svg Strings. Copy the class you like to edit and write it into your own custom.css file. Now look for 

width%3D%2214px%22%20height%3D%2214px

in the svg String and change the 14 to whatever you want! At the end of your new css class you might add an "!important" to the background-image to make sure, you override the existing jquery class!

If you want to resize the icon from an a element, you have to additionally add an extra class to it. (In this case, change the svg String to 50px)

.icon50px {     
    height: 50px !important;
    width: 50px !important;
    font-size: 13px !important; }

.icon50px:after {
    height: 50px !important;
    width: 50px !important;
    margin-left: -25px;
    margin-top: -25px; }

Have fun ;)

Upvotes: 2

Simon Arnold
Simon Arnold

Reputation: 16177

Unfortunately, if you want to keep the icon crisp, you will have to do custom icons.

See instruction:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Upvotes: 2

Related Questions