jQuery Mobile Button Icons | Tutorial

Tutorial -- Learning is not just about technology, but also about dreams!

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

jQuery Mobile Tutorial

jQuery Mobile Tutorial jQuery Mobile Introduction jQuery Mobile Installation jQuery Mobile Pages jQuery Mobile Transitions jQuery Mobile Buttons jQuery Mobile Button Icons jQuery Mobile Popups jQuery Mobile Toolbars jQuery Mobile Navbars jQuery Mobile Panels jQuery Mobile Collapsibles jQuery Mobile Tables jQuery Mobile Grids

jQuery Mobile Lists

jQuery Mobile List Views jQuery Mobile List Content jQuery Mobile Filters

jQuery Mobile Forms

jQuery Mobile Form Basics jQuery Mobile Form Inputs jQuery Mobile Form Selects jQuery Mobile Form Sliders

jQuery Mobile Themes

jQuery Mobile Themes

jQuery Mobile Events

jQuery Mobile Events jQuery Mobile Touch Events jQuery Mobile Scroll Events jQuery Mobile Orientation Change Events jQuery Mobile Examples jQuery Mobile Data Attributes jQuery Mobile Icons jQuery Mobile Events jQuery Mobile Page Events jQuery Mobile CSS Classes

jQuery Mobile Buttons

jQuery Mobile Popups

jQuery Mobile Button Icons

---

jQuery Mobile provides a set of icons to make buttons look more appealing.

---

Adding Icons to jQuery Mobile Buttons

We can use the ui-icon class to add icons to buttons and specify the button's position with designated classes.

Search

Note: For other types of buttons, such as those in lists or forms, you need to use the data-icon attribute. We will cover this in detail in the following chapters.

Below, we list some of the available icons provided by jQuery Mobile:

Button Class	Description	Button	Example
ui-icon-arrow-l	Left arrow		Try it
ui-icon-arrow-r	Right arrow		Try it
ui-icon-info	Info		Try it
ui-icon-delete	Delete		Try it
ui-icon-back	Back		Try it
ui-icon-audio	Speaker		Try it
ui-icon-lock	Lock		Try it
ui-icon-search	Search		Try it
ui-icon-alert	Alert		Try it
ui-icon-grid	Grid		Try it
ui-icon-home	Home		Try it

To see the complete reference manual for all jQuery Mobile button icons, please visit our jQuery Mobile Icons Reference.

---

Positioning the Icon

You can also specify where the icon should be positioned on the button: top, right, bottom, or left.

Use the ui-btn-icon attribute to specify the position:

Icon Positions:

Top Right Bottom Left

Try it »

If you do not specify the button icon's position, the icon will not be displayed.

---

Icon Only

If you want to display only the icon, you can use "notext":

Example:

Search

Try it »

---

Remove Circle

By default, all icons have a gray circle. If you don't need it, you can use the "ui-nodisc-icon" class on the element:

Example

With Circle (Default) Without Circle

Try it »

---

Black, White Buttons

By default, all icons are white. If you need to change the icon color to black, you can add "ui-alt-icon" to the element:

Example

White Black

Try it »

---

More Examples

Add "ui-nodisc-icon" class to a container

Example using the "ui-nodisc-icon" class.

Add "ui-alt-icon" class to a container

Example using the "ui-alt-icon" class.