Generador de botones html para redes sociales
Este ligero fragmento de código te ayuda a crear botones HTML para redes sociales. 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 vincular 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 hover. Si usted está trabajando en un proyecto de intercambio social o simplemente quiere colocar iconos de medios sociales en el elemento de pie de página, a continuación, estos iconos son el mejor ajuste para su necesidad.
Realmente disfruto lo que hago, lo que me hace más apasionado por el desarrollo web y la codificación. Siempre estoy dispuesto a hacer tareas desafiantes si se trata de crear un CMS personalizado desde cero o personalizar un sistema existente.
¿Cómo se añade un icono a HTML?
Para insertar un icono, añada el nombre de la clase de icono a cualquier elemento HTML en línea. Los elementos <i> y <span> son muy utilizados para añadir iconos. Todos los iconos de las siguientes bibliotecas de iconos son iconos vectoriales escalables que pueden personalizarse con CSS (tamaño, color, sombra, etc.).
¿Se pueden utilizar iconos de redes sociales en el sitio web?
Puede añadir iconos de redes sociales en la parte superior o inferior de su página web o entrada de blog para dirigir a sus lectores a otras plataformas en las que esté presente. Sin embargo, es mejor colocar los iconos por encima del pliegue, ya que así son más visibles.
¿Por qué no se muestran los iconos en HTML?
La mayoría de las veces, al utilizar Edge, no muestra los iconos. Probablemente se trate de un problema de compatibilidad. Así que se recomienda eliminar la línea <link rel=”https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome- [email protected]/css/fontawesome.
Iconos Unicode de redes sociales
Puede cambiar fácilmente el Color de los iconos Sociales. Haga clic en el elemento Iconos sociales para seleccionarlo, vaya al Panel de propiedades, desplácese hasta la sección Color y seleccione un Color. Puede añadir o cambiar un Color Personalizado o no elegir ningún color para recuperar los colores originales.
Los Iconos Sociales te permiten construir y mantener conexiones sociales con tu audiencia, y puedes utilizar el elemento Iconos Sociales para ello. Empieza con los preajustes, que tienen un estilo universal y se adaptan a la mayoría de los casos. Haz clic en Añadir iconos para abrir el Panel, ve y haz clic en Iconos sociales y selecciona el preajuste que necesites para añadirlo a un bloque web.
Puedes añadir fácilmente un nuevo icono a los elementos Social Icons. Seleccione el elemento en un bloque, luego vaya al Panel de Propiedades. Haga clic en el icono Añadir situado debajo de la lista de iconos existentes y seleccione un nuevo icono de la lista. Después de añadir, especifique el enlace social para el icono social recién añadido.
En algunos casos, no basta con utilizar el elemento predeterminado o sus preajustes para inspirarse en un buen diseño. Puede utilizar los diseños realizados por diseñadores para los bloques que contienen el elemento Iconos sociales, que le darán ideas y acelerarán la construcción del sitio web.
Iconos Font awesome
</style>Nota que los estilos incluyen los nombres de las redes sociales. Si la red de medios sociales que desea utilizar ya está incluido, entonces usted puede copiar estos estilos tal cual. De lo contrario, tendrás que actualizarlos para incluir la nueva red social. Por ejemplo, para LinkedIn, deberías añadir: .gh-head-menu .nav-linkedin a y .gh-head-menu .nav-linkedin a::before.Code Injection ahora tiene este aspecto:Añade los iconos de las redes socialesEl último paso es añadir estilos que incluyan el icono real de cada red social. Aquí está el código para los iconos mencionados anteriormente. Una vez más, añadirlo a la cabecera del sitio.<style>
</style>Para iconos de redes sociales adicionales, copie el unicode (el valor después del contenido) del sitio web de FontAwesome. A continuación, sigue el patrón anterior para crear una nueva regla CSS.Por ejemplo, añade un icono de LinkedIn con la siguiente regla CSS: .gh-head-menu .nav-linkedin a::before {
Iconos de redes sociales html
Para añadir un bloque de iconos sociales, haz clic en el botón Añadir bloque y, a continuación, busca el bloque de iconos sociales o escribe una barra diagonal en una nueva línea, seguida de la palabra “social”. A continuación, pulsa Intro para añadir el bloque de iconos sociales.
A continuación, tendrás que vincular el icono a tu perfil en las redes sociales. Para ello, haz clic en el icono y aparecerá un cuadro para que introduzcas la dirección. Escribe o pega el enlace a tu perfil en las redes sociales y haz clic en el icono de la flecha para aplicarlo.
Para añadir iconos adicionales, primero, haz clic para seleccionar de nuevo el bloque de iconos sociales. A continuación, haz clic en el botón con el signo más situado a la derecha y busca el icono que desees. Cuando lo encuentres, selecciona el icono para añadirlo a la lista. Vuelve a hacer clic en el icono para introducir la dirección y haz clic en el icono de la flecha para aplicarla.
Cuando hayas terminado de añadir iconos, puedes ajustar la configuración de todo el bloque. En primer lugar, haz clic en el botón situado a la izquierda de la barra de herramientas para seleccionar el bloque de iconos sociales. Con el bloque seleccionado, puedes cambiar la justificación de los iconos dentro del bloque o cambiar la alineación de todo el bloque. Si lo deseas, también puedes definir un tamaño diferente para los iconos.