Bulma es una biblioteca CSS gratuita y de código abierto que se utiliza para diseñar sitios web y aplicaciones web rápidos y receptivos. Bulma es compatible con todas las bibliotecas de fuentes de íconos que existen, como Material Design Icons, Font Awesome 5, Font Awesome 4, Ionicons, etc. En este artículo, veremos cómo usar la biblioteca de fuentes de íconos de Ionicons con Bulma.
Para usar Ionicons, usamos el elemento ion-icon proporcionado por ionicons y establecemos el atributo de nombre con el nombre del icono que queremos usar.
Sintaxis:
<span class="icon"> <ion-icon name="arrow-redo-circle-outline"></ion-icon> </span>
Ejemplo: El siguiente ejemplo muestra cómo usar ionicons con Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Ionicons</title> <link rel='stylesheet' href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <script type="module" src= "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src= "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Ionicons</b> <div class="container"> <span class="icon has-text-danger"> <ion-icon name="arrow-redo-circle-outline"></ion-icon> </span> <span class="icon has-text-success"> <ion-icon name="accessibility-outline"></ion-icon> </span> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/icon/#ionicons