Cómo usar Font Awesome en Divi

julio 14, 2020

Muchas veces cuando trabajamos con un constructor visual como Divi, los íconos que vienen con él no son suficientes o necesitamos otros. Por eso es que buscamos echar mano de otros set de íconos. Uno de los más usados es Font Awesome. Y en este tutorial te mostraremos cómo hacerlo.

    1. Crear el código del kit de Font Awesome

    Para crear el código del kit de Font Awesome lo que hay que hacer es en primer lugar ingresar a https://fontawesome.com/start.

    Ahí tendremos que colocar nuestra dirección de email. Y después de confirmar nuestra dirección de email y crear una cuenta gratuita en el sitio de Font Awesome tendremos acceso a un código como este:

     

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

     

     

    No copies y pegues este código, porque o va a funcionar. Sigue lo anterior mencionado para obtener el código de tu kit.

    2. Enlazar el código del kit de FontAwesome en el sito web

    Para enlazar el código del kit en tu sitio web, agrega el siguiente script en el functions.php del tema hijo de. Si no lo tienes, entonces instala Code Snippets y agrega el siguiente código como un nuevo fragmento de código.

    add_action( 'wp_head', function () { ?>
    <!-- Coloca el código de tu kit aquí -->
    <?php } );

    Recuerda colocar el código de tu kit de Font Awesome que obtuviste en el primer paso en lugar de '<!-- Coloca el código de tu kit aquí -->'. Y si usas Code Snippets seleccionar "Ejecutar solo en la portada del sitio".

     

    3. Usar los íconos en el sitio web

    Para usarlos, tenemos que copiar el código HTML del ícono. Por ejemplo,

    <i class="far fa-smile-wink"></i>

    Y pegarlo dentro de un bloque de código en Divi. Si todavía no has visto los íconos de FontAwesome, puedes revisarlos desde aquí: https://fontawesome.com/icons

     

    Finalmente, mi recomendación es que utilices el atributo 'style' para que puedas modificar los estilos del ícono directamente o que le agregues una clase y le agregues estilos desde la sección de CSS adicional en el administrador de WordPress.

    Regístrate o inicia sesión inicia sesión para ver el contenido premium.

    AprendoWP © 2020. Todos los derechos reservados.