Iconos de redes sociales con Font Awesome

En la entrada de hoy quiero enseñarte como diseñar iconos de redes sociales del tipo sígueme, esto lo haremos a través de códigos HTML y CSS; también haremos uso de la biblioteca Font Awesome y algunos códigos en PHP para así poder agregar esta librería al core de WordPress.

Entonces, si sigues estos pasos como te lo explicaré a continuación, vas a poder tener tus propios iconos de redes sociales personalizados y vinculados a tus cuentas.

En resumen, verás cómo configurar y emplear iconos de Font Awesome para tus perfiles sociales, convertirlos en enlaces y luego darles estilos a través código CSS.

Vamos con ello.

Artículos recomendados:

¿Qué es Font Awesome?

En la web oficial ellos definen a Font Awesome como la biblioteca de iconos y un conjunto de herramientas (toolkits) de Internet que utilizan millones de diseñadores, desarrolladores y creadores de contenido.

Otra definición que nos viene de Wikipedia, Font Awesome es un conjunto de herramientas de fuentes e iconos basado en CSS y Less. A partir de 2020, Font Awesome fue usado por el 38% de los sitios que emplean scripts de fuentes de terceros, colocando a Font Awesome en el segundo lugar después de Google Fonts.

¿Cómo instalar Font Awesome?

Para instalar y hacer uso de la librería provista por Font Awesome, existen hasta ahora dos métodos generales, el primero, a través de un Kit, el cual es el método recomendado por ellos y el segundo es a través de un CDN el cual es el método clásico.

Instalar Font Awesome a través de un plugin en nuestro WordPress

Cómo en WordPress casi todo se resuelve a través de plugins, Font Awesome tiene un complemento oficial que puedes conseguir a continuación: Plugin Font Awesome Oficial.

Entre las características más resaltantes que tenemos al instalar este plugin de Font Awesome es:

• Utilizar la versión gratuita o de pago.
• Seleccionar la versión.
• Cargar la librería a través de CDN o un Kit.
• Agregar iconos tanto en post y páginas a través del editor de texto o con un shortcode.
• Diagnóstico de problemas de compatibilidad.

Como característica resaltante de este plugin en la última de la lista anterior, y es que te permite hacer un diagnóstico de tu WordPress e inspeccionar las versiones de Font Awesome que ya pueden estar cargadas a través otro plugins o temas que estás empleando, y que pueden causar conflicto.

Instalar Font Awesome sin plugins en WordPress

Si eres como yo que te gusta a hacer las cosas de manera manual y a través de código, el siguiente método manual puede ser el que a ti te guste para cargar la librería de Font Awesome a tu WordPress.

Con este método puede usar tanto el CDN como el Kit y hacer uso de la librería gratuita o de pago.

Para comenzar debemos tener acceso de nuestro archivo functions.php que debería estar ubicado en tu carpeta del child theme.

A través de un Kit

Debes ir a tu archivo functions.php y pegar el código.

/**
 * Font Awesome Kit Setup
 * 
 * This will add your Font Awesome Kit to the front-end, the admin back-end,
 * and the login screen area.
 */
if (! function_exists('fa_custom_setup_kit') ) {
  function fa_custom_setup_kit($kit_url = '') {
    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $kit_url ) {
          wp_enqueue_script( 'font-awesome-kit', $kit_url, [], null );
        }
      );
    }
  }
}

El siguiente código PHP, también debe ser agregado al archivo functions.php y es quien contiene el token, en este caso debe sustituir el token «42deadbeef» por el tuyo, el cual debes conseguir en tu cuenta de Font Awesome.

fa_custom_setup_kit('https://kit.fontawesome.com/42deadbeef.js');

A través de un CDN

De igual forma que el anterior, debe utilizar el archivo functions.php para agregar los códigos PHP que a continuación te dejo:

/**
  * Font Awesome CDN Setup SVG
  * 
  * This will load Font Awesome 5 from the Font Awesome Free or Pro CDN.
  */
if (! function_exists('fa_custom_setup_cdn_svg') ) {
  function fa_custom_setup_cdn_svg($cdn_url = '', $integrity = null) {
    $matches = [];
    $match_result = preg_match('|/([^/]+?)\.js$|', $cdn_url, $matches);
    $resource_handle_uniqueness = ($match_result === 1) ? $matches[1] : md5($cdn_url);
    $resource_handle = "font-awesome-cdn-svg-$resource_handle_uniqueness";

    foreach ( [ 'wp_enqueue_scripts', 'admin_enqueue_scripts', 'login_enqueue_scripts' ] as $action ) {
      add_action(
        $action,
        function () use ( $cdn_url, $resource_handle ) {
          wp_enqueue_script( $resource_handle, $cdn_url, [], null );
        }
      );
    }

    if($integrity) {
      add_filter(
        'script_loader_tag',
        function( $html, $handle ) use ( $resource_handle, $integrity ) {
          if ( in_array( $handle, [ $resource_handle ], true ) ) {
            return preg_replace(
              '/^<script /',
              '<script integrity="' . $integrity .
              '" defer crossorigin="anonymous"',
              $html,
              1
            );
          } else {
            return $html;
          }
        },
        10,
        2
      );
    }
  }
}

Ingresando a tu cuenta de Font Awesome, tendrás acceso a la herramienta CDN Picker, en donde debes ubicar el atributo «href» el cual es obligatorio, y el atributo «integrity» el cual es opcional. Entonces, al hacer uso del selector de CDN probablemente obtengas algo similar que el código a continuación:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>

A partir del código anterior, debes agregar los estilos al siguiente código:

fa_custom_setup_cdn_webfont(
  'https://use.fontawesome.com/releases/v5.15.4/css/all.css',
  'sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm'
);

Con los códigos que hemos mostrado hasta ahora sería suficiente para poder usar la librería Font Awesome en nuestro WordPress; sin embargo, te voy a dejar un enlace web para que consultes toda la información oficial al respecto: Configurar Font Awesome 5 en WordPress.

Cómo mostrar los iconos de redes sociales de Font Awesome

En WordPress

Si utilizaste en WordPress el plugin para instalar la librería de Font Awesome, o los métodos de agregar códigos PHP al archivo functions.php, ya puedes hacer uso de la librería para mostrar iconos de redes sociales en tu web a través de bloques HTML y algo de CSS.

A continuación te mostraré los códigos HTML y CSS de ejemplos para colocar las redes sociales de Facebook, linkedin, Twitter, Instagram y YouTube:

<h3 style="font-size: 24; color:blue; text-align: center;"> Sígueme en mis Redes Sociales</h3>
    <div class="redes">
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>

En el valor del atributo identificado con «#» debes sustituirlo por la url de tu perfil de red social correspondiente, por otro lado, estos iconos lo envolvemos en un «div» con la clase «redes» para aplicarle los estilos a continuación:

/*Colores de Marca*/
.fa-facebook {
	background:#1877f2;
} 

.fa-linkedin {
	background:#0a66c2;
}

.fa-twitter {
	background: #1da1f2;
}

.fa-instagram {
	background: #c32aa3;
}

.fa-youtube {
	background: #ff0000;
}

/*Agregar estilos adicionales a iconos*/
.redes {
	display: flex;
	align-items: center;
	justify-content: center;
}

.redes i {
	color: #fff;
	width: 40px;
	height: 40px;
    margin: 1px;
	font-size: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.redes a {
	text-decoration: none;
}

.redes i:hover {
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
	opacity: .9;
}

En página web en HTML

En el valor del atributo identificado con «#» debes sustituirlo por la url de tu perfil de red social correspondiente, por otro lado, estos iconos lo envolvemos en un «div» con la clase «redes» para aplicarle los estilos a continuación:

Si tu web no está hecha en WordPress, puedes utilizar el siguiente código HTML y CSS para agregarlo a tu web:

Hoja HTML para copiar y pegar, contiene los enlaces a las hojas de estilos de Font Awesome versión 5 y a una hoja de estilo que debe estar en la estructura de carpeta de tu web:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
    <title>Iconos de Redes sociales</title>
    <link href="css/css-iconos.css" rel="stylesheet">
</head>
<body>
    <h3 style="font-size: 24; color:blue; text-align: center;"> Sígueme en mis Redes Sociales</h3>
    <div class="redes">
        <a href="#"><i class="fab fa-facebook"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
</body>
</html>

Hoja de estilos CSS para enlazar a la hoja de HTML anterior:

/*Colores de Marca*/
.fa-facebook {
	background:#1877f2;
} 

.fa-linkedin {
	background:#0a66c2;
}

.fa-twitter {
	background: #1da1f2;
}

.fa-instagram {
	background: #c32aa3;
}

.fa-youtube {
	background: #ff0000;
}

/*Agregar estilos adicionales a iconos*/
.redes {
	display: flex;
	align-items: center;
	justify-content: center;
}

.redes i {
	color: #fff;
	width: 40px;
	height: 40px;
    margin: 1px;
	font-size: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.redes a {
	text-decoration: none;
}

.redes i:hover {
    -ms-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
	opacity: .9;
}

Resultado final

Si seguiste cada uno de los pasos anteriores, ya sea a través de plugins o a través de códigos HTML, CSS y PHP, todo debe funcionar a la perfección:

Si deseas ver como funciona los iconos de RR.SS, te dejo dos enlaces a continuación, el primero es para que lo veas funcionando en vivo y el segundo es el repositorio GitHub por si quieres ayudar a mejorar con cambiar el código:

Conclusión

Como pudiste ver a lo largo del post se enseñaron varios métodos bajo los cuales puedes colocar iconos de redes sociales a través de la librería Font Awesome, este tipo de iconos son relevantes en nuestra web para hacer conexión de la misma con nuestros perfiles sociales.

Espero entonces te hayan sido útiles en tus proyectos digitales, ya sea una web corporativa o tu blog.

¿Cuéntame tu experiencia aplicando este post?

Por último, gracias por visitar y no olvides compartir en las redes sociales con tus amigos el contenido “Cómo iconos de Redes Sociales personalizados para tu Blog”.

¡Éxitos!