¿Cómo imitar los iconos sociales de WordPress.com en Jetpack?

Iconos sociales de Jetpack

Iconos sociales de Jetpack

Tal y como podéis ver en la imagen que acompaña a esta entrada, hace apenas unas semanas que WordPress.com cambió los iconos sociales de sus blogs, y desde entonces queríamos modificar los feos iconos sociales de Jetpack, uno de nuestros plugins favoritos, y que nos traen los chicos de WordPress, por esos tan bonitos que habían insertado en nuestro blog de WordPress.

Y así, tras esperar a que en las dos últimas actualizaciones del plugin para WordPress sacaran los nuevos iconos, y tras comprobar que no están por la labor de incluirlos, nos hemos puesto manos a la obra cogiendo el código CSS de WordPress.com, y hemos conseguido replicar sus iconos sociales en el sitio web de APG. Tal y como podéis ver al final de esta misma entrada.

Con ello no sólo hemos conseguido que estéticamente sean mucho más bonitos, sino que la carga del sitio web sea más rápida al no utilizar ninguna imagen en los nuevos iconos sociales.

¿Y cómo lo hemos hecho?

Bueno, lo primero que vamos a necesitar es descargarnos el set de iconos de Genericons, un fantástico set de iconos vectoriales que nos llega, como no, de la mano de los chicos de WordPress.

Una vez descargado debes instalar la carpeta font y el archivo genericons.css en la carpeta de tu hijo de plantilla, o directamente en tu plantilla, si no usas un tema hijo. Lo recomendable sería insertar el código que contiene el archivo genericons.css en el archivo style.css de tu plantilla o hijo de plantilla, aunque también puedes hacer una llamada al archivo insertando este código al inicio de tu archivo style.css:

Una vez que tenemos instaladas las fuentes que vamos a utilizar, vamos a insertar este pequeño código CSS al final de nuestro archivo style.css y veremos cómo ocurre magia:

Esperamos que os guste y os resulte útil esta pequeña modificación de la hoja de estilo del fantástico plugin Jetpack.

Por cierto, el código lo hemos limpiado de todo aquello que hemos visto que no es necesario, pero todavía se podría limpiar un poco más, así que esperamos vuestros aportes para ir actualizando y acortando todo lo posible esta hoja de estilo.

2018-06-06T09:47:20+00:009 de marzo de 2014|Categorías: Tutoriales|Etiquetas: , , , |Sin comentarios

Deja tu comentario

Información básica sobre Protección de Datos

  • Responsable: EMILIO JOSÉ CALVO CARRASCO.
  • Fin del tratamiento: Mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios.
  • Legitimación: El consentimiento del usuario.
  • Comunicación de los datos: No se comunicarán los datos a terceros, salvo por una obligación legal.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
  • Contacto: info@artprojectgroup.es.
  • Información adicional: Puede consultar la información adicional y detallada sobre Protección de Datos en Política de Privacidad.