Font Awesome implementacion v5.13 2020
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