Saltar al contenido principal

Íconos

Agrega íconos a tu proyecto para mejorar la usabilidad y estética de tu aplicación.

Para la iconografía se recomienda usar iconify

Iconify​

Instalación​

Iconify cuenta con varias formas de instalación: mediante css, html, on demand.

Recomendamos usar la versión on demand, para conocer más sobre las ventajas y desventajas de usar este metodo visitar su documentación

On demand​

Agrega el siguiente script a tu html, para más información visita su documentación

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@3.0.0/dist/iconify-icon.min.js"></script>

Uso básico​

Para usar íconos usar la clase icon

<div class="is-flex is-flex-column is-gap-3">
  <!--  DEFAULT  -->
  <iconify-icon class="icon" icon="mdi:account-outline"></iconify-icon>

  <!--  MEDIUM  -->
  <iconify-icon class="icon is-md" icon="mdi:account-outline"></iconify-icon>

  <!--  LARGE  -->
  <iconify-icon class="icon is-lg" icon="mdi:account-outline"></iconify-icon>
</div>

Texto con ícono​

Home

Esto es un texto con iconos como , , y otros íconos

<div class="is-flex is-flex-column gap-4">
  <span class="icon-text">
    <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
    <span>Home</span>
  </span>

  <p>
    Esto es un texto con iconos como
    <span class="icon-text">
      <iconify-icon class="icon" icon="mdi:account-outline"></iconify-icon>
      <span>,</span>
      <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
      <span>,</span>
      <iconify-icon
        class="icon is-color-error"
        icon="mdi:warning"
      ></iconify-icon>
    </span>
    y otros íconos
  </p>
</div>