martes, 8 de marzo de 2022

Funcionalidades de los íconos de fontawesome-free-6.0.0-web | Parte 2

clip-path2ebido a que los iconos pueden tardar unos segundos en cargarse, y debido a que desea controlar el espacio que ocuparán los iconos, puede usar la clase como un contenedor cuadrado confiable que evitará que la página "salte" a la carga de la página.

Librería de los íconos usada en esta publicación:
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v5.15.4/css/all.css" >


Ejemplo





Light Bulb IconNota: El fondo amarillo aplicado sobre la imagen, solo está aquí con fines de demostración, para resaltar el área del contenedor del icono usado como ejemplo. Dicho fondo, aunque llamativo, no es nativo del ícono.



HTML



<span class="icon">
  <i class="fas fa-home"></i>
</span>

.........................................😉.........................................

Puede combinar tantos elementos y elementos de texto como desee:

Ejemplo



Caracas Bogotá Quito Lima


HTML



<span class="icon-text">
  <span class="icon">
    <i class="fas fa-plane"></i>
  </span>
  <span>Caracas</span>
  <span class="icon">
    <i class="fas fa-arrow-alt-square-right"></i>
  </span>
  <span>Bogotá</span>
  <span class="icon">
    <i class="fas fa-arrow-alt-square-right"></i>
  </span>
  <span>Quito</span>
  <span class="icon">
    <i class="fas fa-arrow-alt-square-right"></i>
  </span>
  <span>Lima</span>
  <span class="icon">
    <i class="fas fa-flag-checkered"></i>
  </span>
</span>

.........................................😉.........................................

Dado que es un elemento, se puede insertar fácilmente dentro de cualquier párrafo del texto.

Ejemplo



Una invitación familiar a cenar. Poco después fue enviada; y ya estaba la Sra. Pérez planeando una velada agradable para su suegro. El Sr. Bermúdez estaba obligado a estar en la Ciudad al día siguiente y, en consecuencia, no pudo aceptar el honor de su invitación , etc.

La Sra. Pérez estaba bastante desconcertada. Ella no podía imaginar qué negocio podría tener en la ciudad tan pronto después de su llegada de Caracas; y ella comenzó a temer que él pudiera estar siempre volando y no poder platicarle de su nuevo nieto.


HTML

<div class="content">
  <p>
    Una invitación familiar a
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-utensils"></i>
      </span>
      <span>cenar</span>
    </span>
   Poco después fue enviada; y ya estaba la Sra. Pérez planeando una velada agradable con su suegro. El Sr. Bermúdez estaba obligado a estar en la
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-city"></i>
      </span>
      <span>ciudad</span>
    </span>
    al día siguiente y, en consecuencia, no pudo aceptar el honor de su
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-envelope-open-text"></i>
      </span>
      <span>invitación</span>
    </span>,
    etc.
  </p>

  <p>
   La Sra. Pérez estaba bastante desconcertada. Ella no podía imaginar qué negocio podría tener en la ciudad tan pronto después de su
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-flag-checkered"></i>
      </span>
      <span>arrival</span>
    </span>
llegada de  Caracas; y ella comenzó a temer que él pudiera estar siempre
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-plane-departure"></i>
      </span>
      <span>volando</span>
    </span>
   y no poder platicarle de su nuevo nieto.
  </p>
</div>

.........................................😉.........................................

También puede convertirlo en un elemento simplemente usando una etiqueta en su lugar: icon-textflex <:div>:

Ejemplo



Información

Su paquete será revisado al salir, disculpe las molestias y ¡gracias!.

Exito

Su correo fue enviado exitosamente.

Advertencia

Este website utiliza cookies. Clic para aprobar y seguir

Peligro

Perro bravo, no pase



HTML 


      
 <div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Información</span>
</div>

<p class="block">
Su paquete será revisado al salir, disculpe las molestias y <strong>¡gracias!</strong>.
</p>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Éxito</span>
</div>

<p class="block">
  Su correo fue enviado exitosamente.
</p>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Advertencia</span>
</div>

<p class="block">
   Este website utiliza cookies. Clic para aprobar y seguir 
</p>

<div class="icon-text">
  <span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
  </span>
  <span>Peligro</span>
</div>

<p class="block">
  Perro bravo, no pase.
</p>


.........................................😉.........................................

Dado que las fuentes de los iconos son simplemente texto, puede usar los ayudantes de color para cambiar el color del icono.

Ejemplo






HTML


      
  <span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
  <i class="fas fa-ban"></i>
</span>


CSS




 <style>
.has-text-info{color:#3e8ed0!important}
.has-text-success{color:#48c87e!important}
.has-text-warning{color:#0c92ac!important}
.has-text-danger{color:#f14668!important}
 </style>

.........................................😉.........................................

Lo mismo se aplica al texto del ícono.



Ejemplo



Info Success Warning Danger



HTML

<span class="icon-text has-text-info">
  <span class="icon">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Info</span>
</span>

<span class="icon-text has-text-success">
  <span class="icon">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</span>

<span class="icon-text has-text-warning">
  <span class="icon">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</span>

<span class="icon-text has-text-danger">
  <span class="icon">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</span>


.........................................😉.........................................

Es posible trabajar en 4 tamaños. Siempre debe ser un poco más grande que el icono que contiene. Por ejemplo, los iconos de Font Awesome 5 usan un tamaño de fuente predeterminado (ya que hereda el tamaño de fuente), pero proporciona tamaños adicionales. icon1em

Ejemplo:

Clase Contenedor Tamaño del contenedor Clase Font Awesome Tamaño del ícono Resultado
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em



HTML 

 
 
   <table class="table is-bordered">
  <thead>
    <tr>
      <th> <table class="table is-bordered">
  <thead>
    <tr>
     <th>Clase Contenedor </th>
      <th>Tamaño del contenedor</th>
      <th>Clase Font Awesome </th>
      <th>Tañaño del  ícono</th>
     <th>Resultado</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>icon is-small</code>
      </td>
     <td>
        <code>1rem x 1rem</code>
     </td>
      <td>
        <code>fas</code>
      </td>
     <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-small">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td rowspan="2">
        <code>icon</code>
      </td>
      <td rowspan="2">
        <code>1.5rem x 1.5rem</code>
     </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon">
          <i class="fas fa-home"></i>
       </span>
      </td>
    </tr>
    <tr>
      <td>
       <code>fas fa-lg</code>
       </td>
      <td>
        <code>1.33em</code>
       </td>
      <td class="bd-icon-size">
        lt;span class="icon">
          <i class="fas fa-lg fa-home"></i>
        </span>
     </td>
     </tr>
    <tr>
      <td rowspan="3">
        <code>icon is-medium</code>
     </td>
      <td rowspan="3">
        <code>2rem x 2rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
       <td>
        <code>fas fa-lg</code>
      </td>
       <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-lg fa-home"></i>
       </span>
     </td>
   </tr>
    <tr>
       <td>
        <code>fas fa-2x</code>
      </td>
       <td>
        <code>2em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-2x fa-home"></i>
        </span>
     </td>
    </tr>
    </tr>
      <td rowspan="3">
        <code>icon is-large</code>
      </td>
      <td rowspan="4">
        <code>3rem x 3rem</code>
      </td>
       <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-home"></i>
        </span>
     </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-lg</code>
     </td>
       <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-lg fa-home"></i>
       </span>
      </td>
   </tr>
   <tr>
      <td>
        <code>fas fa-2x</code>
      </td>
       <td>
        <code>2em</code>
     </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-2x fa-home"></i>
       </span>
      </td>
   </tr>
 </tbody>
   </table></th>
      <th>Container size</th>
      <th>Font Awesome 5 class</th>
      <th>Icon size</th>
     <th>Result</th>
    </tr>
 </thead> 
  <tbody>
   <tr>
      <td>
        <code>icon is-small</code>
      </td>
       <td>
        <code>1rem x 1rem</code>
     </td>
      <td>
        <code>fas</code>
     </td>
       <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-small">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </td>
       </tr>
   <tr>
      <td rowspan="2">
        <code>icon</code>
      </td>
      <td rowspan="2">
        <code>1.5rem x 1.5rem</code>
      </td>
       <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon">
          <i class="fas fa-home"></i>
        </span>
     </td>
    </tr>
    <tr>
       <td>
        <code>fas fa-lg</code>
      </td>
       <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon">
          <i class="fas fa-lg fa-home"></i>
       </span>
      </td>
    </tr>
   <tr>
      <td rowspan="3">
        <code>icon is-medium</code>
      </td>
      <td rowspan="3">
        <code>2rem x 2rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
       <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-home"></i>
        </span>
     </td>
    </tr>
   <tr>
       <td>
        <code>fas fa-lg</code>
      </td>
       <td>
        <code>1.33em</code>
     </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-lg fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
     <td>
        <code>fas fa-2x</code>
      </td>
       <td>
        <code>2em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-2x fa-home"></i>
        </span>
     </td>
    </tr>
    <tr>
      <td rowspan="3">
        <code>icon is-large</code>
      </td>
      <td rowspan="4">
        <code>3rem x 3rem</code>
      </td>
       <td>
        <code>fas</code>
      </td>
       <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
       <td>
        <code>fas fa-lg</code>
      </td>
       <td>
        <code>1.33em</code>
     </td>
     < td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-lg fa-home"></i>
        </span>
     </td>
   </tr>
    <tr>
      <td>
        <code>fas fa-2x</code>
      </td>
       <td>
        <code>2em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-2x fa-home"></i>
        </span>
      </td>
    </tr>
   </tbody>
 </table>


.........................................😉😉😉.........................................


Fuente:
https://bulma.io/documentation/elements/icon/

⁂


a la/s
Etiquetas: ,

Etiquetas

6.0.0. (2) consultas (1) glifos (2) hover (1) iconos (5) ionicones. (1)