jQuery Mobile - Iconos de barras de navegación

Descripción

Para agregar iconos a su barra de navegación, use data-iconatributo a cada ancla. De forma predeterminada, los iconos se colocan en la parte superior del texto.

Ejemplo

El siguiente ejemplo demuestra el uso de los iconos de la barra de navegación en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Navbar Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "navbar">
         <ul>
            <li><a href = "#" data-icon = "mail">Messages</a></li>
            <li><a href = "#" data-icon = "user" class = "ui-btn-active">Friends</a></li>
            <li><a href = "#" data-icon = "star">Notifications</a></li>
         </ul>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como navbar_icons.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/navbar_icons.html y se mostrará el siguiente resultado.

↰ Previous page