En este artículo, veremos variaciones de íconos de Bulma Font Awesome. Bulma tiene 4 tipos de variaciones de Font Awesome e incluyen íconos de ancho fijo, íconos con bordes, íconos animados y apilados. Todas estas variaciones se analizan a continuación con cada uno de sus ejemplos.
Bulma Icon Font Awesome Variaciones Modificadores:
- Ancho fijo: para usar un ícono de ancho fijo, use la clase fa-fw para agregar un ícono normal.
- Ancho del borde: para usar un ícono de ancho de borde, use la clase fa-border para agregar un borde alrededor del ícono.
- Animado: para usar un ícono animado, use la clase fa-pulse para agregar una animación al ícono.
- Apilado: para agregar dos íconos uno encima del otro o desea hacer una pila de íconos, use la clase fa-stack-2x y fa-stack-1x fa-inverse .
Sintaxis:
<span class="icon">
<span class="fas fa-music fa-fw"></span>
<span class="fas fa-music fa-border"></span>
<span class="fas fa-spinner fa-pulse"></span>
....
</span>
Ejemplo: El siguiente ejemplo ilustra las variaciones del ícono de Bulma Font Awesome.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h1 class="subtitle"> Bulma Font Awesome icons variations </h1> <div class="container"> <span class="icon is-small has-text-danger"> <span class="fas fa-music fa-fw"></span> </span> <br /> <span class="icon is-large has-text-danger"> <span class="fas fa-music fa-border"></span> </span> <br /> <span class="icon is-small has-text-success"> <span class="fas fa-spinner fa-pulse"></span> </span> <br /> <span class="icon is-medium"> <span class="fa-stack fa-sm"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-music fa-stack-1x fa-inverse"></i> </span> </span> <br /> <span class="icon is-large"> <span class="fa-stack fa-lg"> <i class="fas fa-music fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x has-text-danger"></i> </span> </span> </div> </div> </body> </html>
Producción:
Bulma Icon Fuente Variaciones impresionantes
Referencia: https://bulma.io/documentation/elements/icon/#font-awesome-variations
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA