A continuación, puedes vincular el icono a tu perfil en las redes sociales. Para ello, haz clic una vez en el icono y aparecerá un cuadro para que introduzcas tu dirección. Escribe o pega el enlace a tu perfil en las redes sociales y haz clic en el icono de la flecha para introducirlo.
Cuando hagas clic en el bloqueo, encontrarás ajustes adicionales de bloqueo en la barra lateral derecha. Si no ves la barra lateral, es posible que tengas que hacer clic en el icono del ⚙️ (engranaje/ dentado) en la esquina superior derecha para que aparezca la configuración.
Si activas la opción “Permitir que se ajuste a varias líneas”, los botones se moverán a la siguiente línea cuando no haya suficiente espacio en un dispositivo móvil (recomendado). Con este ajuste desactivado, todos los botones permanecerán en la misma línea sin importar lo que suceda.
Este ligero fragmento de código le ayuda a crear botones de medios sociales HTML. Básicamente, estos botones sociales han sido diseñados con CSS y Font Awesome para iconos sociales. Puedes integrarlos fácilmente en tu proyecto para enlazar perfiles de redes sociales. Sólo tienes que añadir un enlace a tu perfil social al atributo href de hipervínculo.
Además, estos botones de redes sociales vienen con un elegante tooltip de hover. Si estás trabajando en un proyecto de intercambio social o simplemente quieres colocar iconos de redes sociales en el elemento de pie de página, entonces estos iconos son los que mejor se adaptan a tus necesidades.
Aquí tengo 7 imágenes de iconos de redes sociales y todos ellos tienen estados de rollover. Eso significa que podría haber 14 peticiones HTTP para imágenes sólo para estos pequeños botones. Las imágenes en sí mismas pueden ser pequeñas, pero son las solicitudes separadas para obtener las imágenes las que pueden aumentar severamente la carga de la página.
Como puedes ver, un sprite es una gran imagen que puede ser desplazada para mostrar sólo partes de ella en determinados momentos. Aquí cada botón es de 32 píxeles por 32 píxeles. Están colocados uno al lado del otro para que no haya espacio entre ellos – esto hace que sea más fácil después cuando se hace el posicionamiento CSS.
Como puedes ver, se trata de una simple lista HTML para cada elemento de las redes sociales y cada elemento de la lista tiene su propio ID (esto es para el posicionamiento CSS). He quitado los enlaces y los títulos para que puedas ver lo que está pasando.
Entonces, ¿por qué los pongo en la cabecera cuando siempre han estado en la barra lateral? He aprendido, probando sitios web en los últimos años, que ser obvio funciona: es mucho más probable que se haga clic en un botón grande que en uno pequeño.
Haz clic con el botón derecho del ratón en uno de tus iconos de redes sociales actuales y desplázate hasta “Inspeccionar elemento”. Es importante sustituir los iconos actuales de las redes sociales por otros del mismo tamaño. No queremos alterar el estilo del sitio web.
Si después de instalar el código del paso 6. observas que tus iconos de redes sociales son verticales y no horizontales, haz clic en “main-style.css” a la izquierda, desplázate hacia abajo hasta el código que aparece a continuación y elimina la parte naranja del código.#header-left table { float: left; width:1px; margin-left:-5px;}
Si quieres que tus iconos de redes sociales se resalten (es decir, se vuelvan oscuros a claros) cuando alguien pase el ratón por encima de ellos, añade el siguiente código al archivo main-style.css en la parte inferior..highlightit img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.9;opacity: 0.9;}.highlightit:hover img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity: 5;opacity: 5;}