Bulma es un marco CSS gratuito y de código abierto que se puede utilizar como alternativa a Bootstrap . Viene con componentes preconstruidos como botones e íconos. En este artículo, veremos cómo cambiar los colores de los íconos en Bulma. Dado que los íconos que usamos son simplemente texto, podemos usar ayudantes de color de texto para cambiar el color de los íconos. Usaremos el paquete de íconos de fuente impresionante para los íconos
Íconos de Font Awesome: Font-awesome es una biblioteca de íconos web que le brinda íconos vectoriales escalables que se pueden personalizar en términos de color, tamaño y en muchos más aspectos.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/font-awesome.min.css
Clases de ayudantes de color:
- has-text-white: Esta clase se usa para cambiar el color del texto a hsl(0, 0%, 100%) .
- has-text-black: Esta clase se usa para cambiar el color del texto a hsl(0, 0%, 4%) .
- has-text-light: Esta clase se usa para cambiar el color del texto a hsl(0, 0%, 96%).
- has-text-dark: Esta clase se usa para cambiar el color del texto a hsl(0, 0%, 21%).
- has-text-primary: Esta clase se usa para cambiar el color del texto a hsl(171, 100%, 41%).
- has-text-link: Esta clase se usa para cambiar el color del texto a hsl(217, 71%, 53%).
- has-text-info: esta clase se usa para cambiar el color del texto a hsl (204, 86%, 53%).
- tiene-texto-éxito: Esta clase se usa para cambiar el color del texto a hsl(141, 71%, 48%).
- has-text-warning: Esta clase se usa para cambiar el color del texto a hsl(48, 100%, 67%).
- has-text-danger: Esta clase se usa para cambiar el color del texto a hsl(348, 100%, 61%).
Sintaxis:
<span class="icon">
<i class="fas fa-home"></i>
</span>
Ejemplo: El siguiente ejemplo muestra cómo cambiar el color del icono usando clases auxiliares de color de texto.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma icon Colors</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b>Bulma Icon Colors</b> <div class="container" style="margin-top: 30px;"> <span class="icon is-large has-text-danger"> <i class="fas fa-2x fa-home"></i> </span> <span class="icon is-large has-text-success"> <i class="fas fa-2x fa-check-square"></i> </span> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/icon/#colors