Perú

Lima,Perú

Font Awesome implementacion v5.13 2020

Fecha Publicación:       26 de Mayo de 2020
Fecha Modificación:       09 de Febrero de 2021

Obtenga iconos vectoriales y logotipos sociales en su sitio web con Font Awesome, el conjunto de herramientas y conjunto de iconos más populares de la web.

Implementar Font Awesome generando un Kit 

Este metodo de instalación devemo ingresar nuestro correo y validarlo luego nos genera un script para insertarlo en nuestra web.

  • Entrar en https://fontawesome.com/   , tenemos  que escoger cualquiera de las 2 opciones:

    • Start for Free.           --> (uso gratis)
    • Get More with pro.    --> (de pago)   obtenga 6.254 íconos más, más estilos y los íconos más rápidos con nuestro nuevo subconjunto automático.

  • Escogeremos de uso libre Start for Free   devemos de introducir nuestro correo para que nos envie el codigo para implementar en nuestra web.
    En mi caso puse mi correo  sisdatahost@hotmail.com y mi clave es mi dni.

     Comience gratis  -->  Kits alimentados por CDN. 1 línea de código. Vivir en menos de 1 minuto.


 

  • Una vez introducido el correo nos llega un correo para confirmar.
  • Confirmamos y nos envia a una página con todos los codigos para implementar en nuestra web   
<head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/micodigo.js" crossorigin="anonymous"></script>
</head>

 

Problemas al impementar el codigo: 

El codigo le puse al final de de index.php... Al darme cuenta  probando con pagespeed de google  bajo la valoración es decir la velocidad de carga un poco ademas me a creado unos archivos que se carga en mi web

  • micodigogeneradoporfontawesome.js      (kit.fontawesome.com)
  • free-v4-shims.min.css                           (kit-free.fontawesome.com)
  • free-v4-font-face.min.css                      (kit-free.fontawesome.com)
  • free.min.css                                       (kit-free.fontawesome.com)


La solucion puede ser  el codigo que implementamos  como es un  script  ponerlo como  asíncrono  debemos incluir el JavaScript de la siguiente manera:

<script async src="/codigo.js"/>


Pero probando con  pagespeed de google todavia sigue cargando estos archivos:

  • free-fa-brands-400.woff2                    (kit-free.fontawesome.com)
  • free-fa-solid-900.woff2                        (kit-free.fontawesome.com)
  • free.min.css                                (kit-free.fontawesome.com)

 

 

Implementar Font Awesome descargando sus archivos  (la mejor manera)

Este metodo me parece mejor devemos descargar lso archivos de Font Awesome:

  • Entrar en https://fontawesome.com/  
  • Clic en Download
  • y escogemos  Free for Web.  y nos comenzara a descargar un zip con todos su archivos.
  • Luego  descomprimimos y :

    • Copiamos el archivo all.css , que se encuentra en la carpeta  -->  fontawesome-free-5.13.0-web\css\all.css
    • Copiamos toda la carpeta webfonts.

  • Los archivos copiados lo ponemos dentro de una carpeta en mi caso lo he puesto en la carpeta  --> templates\2modelo\estilos\font-awesome-v5-13 , alli dentro puso el archivo y la carpeta.

Nota: dentro del archivo all.css  hace referencia  a la ruta de la carpeta  webfonts  tenemos que cambiarlo a la nueva ruta.

 Ruta original

src: url("../webfonts/fa-solid-900.eot");

Ruta cambiada , solo le quite un punto porque ambos estan en la misma carpeta

src: url("./webfonts/fa-solid-900.eot");


Ahora lo implementamos en el Html:

Lo ponemos al final del index:

Metodo Normal

<link  href="templates/<?=$cnomplantilla?>
/estilos/font-awesome-v5-13/all.css"  rel="stylesheet" type="text/css" >

Metodo asincrono  --> la mejor manera

<link rel="stylesheet" href="templates/<?=$cnomplantilla?>
/estilos/font-awesome-v5-13/all.css" media="none" 
onload="if(media!='all')media='all'">

 

 

Ver tambien Font Awesome Implementar en TinyMCE     

Leidas : 289 Veces
Compartir: