Mostrar iconos de fontawesome

Mostrar iconos de fontawesome

Hugui Dugui

En esta ocasión les comparto una tarea que como desarrollador web es común a la hora de hacer sitios web, es la de revisar constantemente el sitio web fontawesome para verificar el código de un icono que queramos usar de esta fuente.

Pues bien, me di a la tarea de hacer un script de php para mostrar todos los iconos de la fuente fontawesome. Comezamos con tener la siguiente estructura de archivos.


Comencemos con lo básico, es decir, cómo se muestra un icono de fontawesome en HTML:

<!DOCTYPE html>
<html>
   <head>
      <title>Iconos fontawesome</title>
      <link rel="stylesheet" href="bootstrap.css">
      <link rel="stylesheet" href="font-awesome.css">
   </head>
   <body>
      <!-- Un icono se muestra con la etiqueta i y una clase -->
      <div class="container">
         <div class="row">
            <div class="col-md-1">
               <i class="fa fa-eye"></i>
            </div>
         </div>
      </div>
   </body>
</html>


Y se ve de la siguiente forma:



Si vamos al archivo font-awesome.css veremos que para el icono fa-eye corresponde el código "f06e" como se muestra en la imagen:


Bien, cada icono corresponde a un número hexadecimal que va desde el "f000" (61441 en decimal) hasta el "f2e0" (62176 en decimal) como vemos en la siguiente imagen:


La tarea por hacer es crear un archivo dinámicamente que contenga una clase css llamada con el primer número hexadecimal hasta el último número hexadecimal y que el atributo content sea también el número hexadecimal como se muestra a continuación:

.f001::before {
   content: "f001";
   font: normal normal normal 14px/1 FontAwesome;
}
.f002::before {
   content: "f002";
   font: normal normal normal 14px/1 FontAwesome;
}
.
.
.


Para hacer esto creamos un ciclo for que va a iterar desde el número 61441 hasta el 62476, hacemos lo necesario para concatenar  el texto, lo hacemos debajo del código que teníamos anteriormente de esta forma:

<!DOCTYPE html>
<html>
  <head>
    <title>Iconos fontawesome
    </title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="font-awesome.css">
  </head>
  <body>
    <!-- Un icono se muestra con la etiqueta i y una clase -->
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-uppercase text-center p-4">
          Iconos de fontawesome
        </div>
        <div class="col-md-1">
          <i class="fa fa-eye">
          </i>
        </div>
        <?php 
            for ($i=61441; $i < 62177; $i++) { 	
               echo "." . dechex($i) . "::before { <br>"; 
               echo "content: " . '"' . "\"  . dechex($i) . '";' . "<br>";
               echo "font: normal normal normal 14px/1 FontAwesome; <br>"; 
               echo "}     <br>";			
           } 
        ?>
      </div>
    </div>
  </body>
</html>

Esto nos genera todas las clases desde la f000 hasta la f2e0:


Todo esto lo copiamos en un nuevo archivo llamado por ejemplo, iconos.css y lo agregamos en el head, ya con esto podemos iterar por todos los iconos simplemente usando su código hexadecimal, ahora veamos el código final para mostrarlos todos:

<!DOCTYPE html>
<html>
  <head>
    <title>Iconos fontawesome
    </title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="font-awesome.css">
    <link rel="stylesheet" href="iconos.css">
  </head>
  <body>
    <!-- Un icono se muestra con la etiqueta i y una clase -->
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-uppercase text-center p-4">
          Iconos de fontawesome
        </div>
        <?php 
            for ($i=61441; $i < 62177; $i++) { ?>
               <div class="col-sm-1 text-center">
                  <i class="<?php echo dechex($i)?>"></i>
                  <br>
                  <span> 
                    <?php echo dechex($i);?> 
                  </span> 
                  <hr>
               </div>
        <?php } ?>
      </div>
    </div>
  </body>
</html>

Se muestran de esta forma:



No olvides que puedes descargar el zip de esta entrada con el proyecto completo listo para usar en tu localhost Mostrar iconos de fontAwesome.

Si quieres puedes escribirme a ringhugos@gmail.com o al whatsapp para cualquier comentario o duda que tengas sobre este tutorial.