cómo agregar íconos de redes sociales en wordpress sin complementos

¿Quiere agregar íconos de redes sociales a su sitio de WordPress sin un complemento?

Hay un montón de publicaciones que muestran cómo agregar íconos usando una fuente impresionante, pero te mostraré una forma mucho más simple sin tener que agregar íconos externos.

Si eres de los que se toma en serio la velocidad de la página, esto te encantará.

Dashicons es la fuente oficial de iconos de WordPress. Aparecen en la barra lateral izquierda de cada backend de administración de sitios de WordPress.

Usaremos estos íconos en lugar de íconos externos. Esto liberará al navegador de solicitar archivos adicionales.

Simplemente siga estos pasos:

Paso 1

Agregue el widget HTML personalizado en la barra lateral o en el pie de página. Puede administrar los widgets en Panel de control >>> Apariencia >>> Widgets.

Paso 2

Pega este código en el cuadro de contenido.


En este código, solo mostramos los íconos de Facebook y Twitter.
Para agregar más íconos, deberá personalizar tres partes en él.

href es el enlace a su página social
aria-label es texto que describe el enlace

El tercero y el más importante es la clase = "dashicons dashicons-facebook-alt"

Cada fuente de los Dashicons tiene una clase específica que se utiliza para mostrar el icono. Podemos encontrar la clase de un icono haciendo clic en él.

Reemplaza esta parte por la que quieras usar.

Por ejemplo, reemplace dashicons-facebook-alt con dashicons-corazón y se mostrará el icono del corazón.

Paso 3.

Agregue este CSS en su archivo Style.css de temas secundarios o en la opción CSS adicional del Personalizador

.social-link-container {display: flex; } .social-link-container .social-link {padding: 3px; margen derecho: 10px; } .dashicons {tamaño de fuente: 30px; color: #fff; ancho: 40px; altura: 40px; radio de borde: 50%; pantalla: flex; justificar-contenido: centro; alinear-elementos: centro; }

Este código anterior agregará todos los atributos de los íconos excepto el color. Use el siguiente código para agregar color a los íconos que solo serán visibles en ese momento.

.dashicons-facebook-alt {fondo: # 1877F2; } .dashicons-twitter {fondo: # 1DA1F2; }

Si agrega más íconos, puede agregar un color de fondo diferente a cada ícono usando su clase y el CSS anterior.

¿Quieres agregar un efecto de desplazamiento simple? Agregue esto a su CSS si desea mostrar un efecto de desplazamiento de 'Crecimiento en'

.dashicons: hover {-webkit-transform: scale (1.2); -ms-transform: escala (1.2); transformar: escala (1.2); }

¡Eso es! Ahora borre el caché del sitio web y verifique su widget, se mostrará así

Si sigue los pasos exactamente, lo hará funcionar.
Si no es así, comente a continuación y puedo ayudarlo a resolverlo.

Deja un comentario