Blog de programación, errores, soluciones

Agregando Font Awesome a WordPress

En algún momento es probable que desee agregar Font Awesome a su página o blog creado en wordpress.

Esto es relatviamente sencillo lo puede agregar creandose un usuario en font awesome y agregando el codigo en su página web.

Pero en este blog no nos conformamos solamente con hacer eso, sino en tratar de que lo que agregamos funcione con la mejor performance posible.

Creando la cuenta

Primero veamos la primera parte que seria agregar Font Awesome a nuestro blog. Esto lo puede hacer en:

https://fontawesome.com/start

Cuando entramos a font awesome nos pide nuestro correo, esto es para crearnos una cuenta free no te preocupes.

Una vez dado nuestro correo nos enviaran para entrar y poner contraseña nuestra cuenta.

Agregando código a nuestra página

Una vez teniendo la cuenta, entramos en esta y deberemos ir a manage kit, y dentro de manage kit creamos uno si es que no tenemos ninguno sino usamos el que tenemos.

Las cuentas Free solo permiten un kit.

Una vez tengamos un kit debemos hacer clic en el nombre de nuestro kit.

Una vez entremos nos mostrará un fragmento de código, lo tendremos que agregar a nuestra página para que Font Awesome funcione. También tiene una parte que nos muestra donde ponerlo en nuestra página, no haga caso a estas instrucciones.

El código es algo así:

<script src="https://kit.fontawesome.com/fake2u823753.js" crossorigin="anonymous"></script>

Tenga en cuenta que este código de ejemplo es fake y no podrá usarlo en su web.

Luego de tener el código deberá ponerlo antes de cerrar body(</body>), esto evitara que el código tranque la carga de la página y sea ejecutado una vez la página haya cargado el HTML.

En WordPress generalmente el cierre de body está en footer.php que está en el themplate que está usando.

En Particular a mí no me gusta en depender en un src que depende de otra página así que lo que hago es copiar lo que tenga el link del src.

El código quedaría algo así o algo parecido.

<script crossorigin="anonymous">
/*en mi caso codigo dentro https://kit.fontawesome.com/fake2u823753.js*/
</script>
<?php wp_footer();?>
</body>
</html>
Somethig wrong? If you found an error or mistake on the content you can contact me on twitter | @luisg2249_luis.
Last 4 post in same category