Texto del icono de Bulma – Barcelona Geeks

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño. En este artículo, aprenderemos el texto del icono de Bulma .

Bulma admite elementos de iconos con textos en intervalos o elementos de párrafo. Para agregar texto con los íconos en el marco de Bulma, podemos usar el envoltorio icon-text . Los iconos también se pueden insertar entre la etiqueta <p> o cualquier texto de párrafo.

Clases de texto de Bulma Icon:

icon-text: Esta clase se usa para dar un texto descriptivo del elemento icon.

Nota: Puede combinar muchos elementos de iconos con elementos de texto según la necesidad,

Sintaxis:

<div class="icon-text">
  <div class="icon">
    <i class="fas fa-home"></i>
  </div>
  ....
</div>

El siguiente ejemplo ilustra el texto del icono de Bulma:

Ejemplo: Lo siguiente demuestra la clase de icono-texto de Bulma .

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>Bulma icon text</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="container content">
      <h2 class="has-text-success">
        GeeksforGeeks
      </h2>
      <h4>Bulma icon text</h4>
  
      <!-- Single Icon with Text -->
      <div class="icon-text">
        <b><p>Single icon:</p></b>
        <div class="icon">
          <i class="fas fa-home"></i>
        </div>
        <div>Home</div>
      </div>
  
      <!-- Multiple Icons with text -->
      <div class="icon-text">
        <b><p>Multiple icons:</p></b>
        <div class="icon-text">
          <div class="icon">
            <i class="fab fa-node"></i>
          </div>
          <div>Node Js</div>
          <div class="icon">
            <i class="fab fa-html5 has-text-"></i>
          </div>
          <div>HTML 5</div>
          <div class="icon">
            <i class="fab fa-css3"></i>
          </div>
          <div>CSS 3</div>
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Texto del icono de Bulma

Referencia: https://bulma.io/documentation/elements/icon/#icon-text

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta