Setting icons on a jQuery Mobile button

By On May 5, 2011 · 1 Comment · In jQuery, Mobile

The following example shows how you can specify an icon on a jQuery Mobile button instance using the data-role and data-icon attributes.

<!DOCTYPE html>
<!-- http://dhtmlexamples.com/2011/05/05/setting-icons-on-a-jquery-mobile-button/ -->
<html> 
<head> 
    <meta charset="utf-8"/>
    <title>Setting icons on a jQuery Mobile button</title> 
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script>
</head>
<body>
 
<div data-role="page">
    <div data-role="content">
        <a href="#" data-role="button" data-inline="true" data-icon="alert">data-icon="alert"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="arrow-d">data-icon="arrow-d"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="arrow-l">data-icon="arrow-l"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="arrow-r">data-icon="arrow-r"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="arrow-u">data-icon="arrow-u"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="back">data-icon="back"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="check">data-icon="check"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="delete">data-icon="delete"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="forward">data-icon="forward"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="gear">data-icon="gear"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="grid">data-icon="grid"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="home">data-icon="home"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="info">data-icon="info"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="minus">data-icon="minus"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="plus">data-icon="plus"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="refresh">data-icon="refresh"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="search">data-icon="search"</a>
        <a href="#" data-role="button" data-inline="true" data-icon="star">data-icon="star"</a>
    </div>
</div>
 
</body>
</html>

The output from the previous example is as follows:

Tagged with: • •
 
Share
Facebook Twitter
  • Josh

    Handy, thanks