En este artículo, veremos cómo configurar el ícono y la posición del ícono en el botón usando jQuery Mobile. jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear aplicaciones y sitios web receptivos accesibles en todos los teléfonos inteligentes, tabletas y dispositivos de escritorio.
Aquí, usamos las clases ui-btn ui-icon-name ui-btn-icon-position para configurar el ícono y la posición del ícono en la página web. La descripción de las clases se da a continuación:
- ui-btn: esta clase se usa para crear un botón.
- ui-icon-name: esta clase se usa para crear el ícono, aquí reemplazamos nombre con icon-name. Por ejemplo, ui-icono-estrella.
- ui-btn-icon-position: esta clase se utiliza para establecer la posición del icono en el botón. Aquí reemplazamos la posición con el nombre de la posición como izquierda, derecha, arriba, etc.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> How to set the icon and icon position in the button ? </title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="//code.jquery.com/jquery-1.10.2.min.js"> </script> <script src= "//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2> How to set the icon and icon position in the button ? </h2> </div> <a href="#" class="ui-btn ui-icon-edit ui-btn-icon-left">Left</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a> <a href="#" class="ui-btn ui-icon-star ui-btn-icon-top">Top</a> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-bottom">Bottom</a> <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext">Icon only</a> </div> </body> </html>
Producción:
