jQuery Mobile: Icon positioning

This entry is part 47 of 73 in the series jQuery Mobile

By default, icons in input buttons are placed to the left of the button text.

We have placed our icons on the left and this default may be overridden using the data-iconpos attribute to set the icon position to ‘right’, ‘top’, or ‘bottom’.

In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).

Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Button Icon Positioning</h1></div>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left'>Left</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right'>Right</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top'>Top</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-d ui-btn-icon-bottom'>Bottom</a>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

In the highlighted line, we have positioned the icon on the left using ui-btn-icon-left.

 

 

Series Navigation<< jQuery Mobile: Icon sets
jQuery Mobile: Count bubbles on list >>