CODEWITHSUNDEEP
jquery-mobile
acctman
acctman

Reputation: 4349

jquery mobile navbar icons appearing in circle

I'm using custom icons but they're appearing in a circle. Is here a class I need to turn off to stop this?

<div data-theme="a" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
                                <span class="foot_font">test1</span>
                            </a>
                        </li>
                        <li>
                            <a href="page40.html" id="test2" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test2</span>
                            </a>
                        </li>
                        <li>
                            <a href="page44.html" id="test3" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test3</span>
                            </a>
                        </li>
                        <li>
                            <a href="page22.html" id="test4" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test4</span>
                            </a>
                        </li>
                        <li>
                            <a href="page47.html" id="test5" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test5</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

enter image description here

Upvotes: 1

Views: 1242

Answers (2)

Jacob Nelson
Jacob Nelson

Reputation: 2466

To remove the circle gray background behind simply add the

ui-nodisc-icon

class to the link/button

for example, your code can be changed to

<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active ui-nodisc-icon">
    <span class="foot_font">test1</span>
</a>

Upvotes: 1

user1263800
user1263800

Reputation:

You can override this css behavior by adding

.ui-icon
{
    border-radius:0px!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    -ms-border-radius:0px!important;
    -o-border-radius:0px!important;
}

Upvotes: 1

Related Questions