Sustituye los iconos de redes sociales en mi código QR de tarjeta de visita digital

book reader icon
1 minuto
facebook logo gray
linkedin logo gray
mail logo gray
Sustituye los iconos de redes sociales en mi código QR de tarjeta de visita digital

Los iconos de redes sociales que se muestran por defecto en una tarjeta de visita digital son lo más neutro posible para que funcionen con todos los diseños. En caso de que quieras añadir un toque personalizado a las landing pages de tu tarjeta de visita, puedes utilizar tus propios iconos en cuestión de minutos.

¿Cómo puedo sustituir los iconos de redes sociales en las tarjetas de visita de mi cuenta?

Sólo tienes que subir a tu Mediateca los logotipos que quieras utilizar y añadir este código en la sección Personalizar de tu tarjeta de visita o en tus plantillas.

1. Ve a la sección Mediateca

Puedes subir los archivos a tu Mediateca o alojarlos en tu propio servidor.

Captura de pantalla del menú lateral
Sección Mediateca

2. Sube los iconos que quieras utilizar

Haz clic en Añadir Imagen y selecciona tus archivos.  Recomendamos el formato SVG para un resultado óptimo. Copia la URL de la imagen de cada uno de tus iconos.

Botón Add image de la sección Media
Sube la imagen en la sección Mediateca

3. Copia la URL de la imagen de tus iconos de redes sociales

Haz clic en el lápiz de las imágenes de tu sección de medios y copia la URL de la imagen de los iconos de redes sociales que quieras utilizar.

4. Crea una nueva plantilla CSS

Ve a la sección de Personalizar de tu tarjeta de visita y haz clic en  Añadir para crear una nueva plantilla CSS de tarjeta de visita.

Captura de pantalla del menú Branding
Sección Personalización de la landing page de tarjeta de visita

5. Añade el código CSS para reemplazar tus iconos

Pega el código que hay a continuación usando las rutas de tus imágenes y guarda tu nueva plantilla cuando esté lista.

<style>
.fc-webicon {box-shadow:none!important;}
.fc-webicon.large {border-radius:48px!important;}

.fc-webicon.facebook {
    background: url("https://youraccount.com/l/media?f=xxxxxxxxxxx")!important;
	background-size:100%!important;
  }

.fc-webicon.twitter {
    background: url("https://youraccount.com/l/media?f=xxxxxxxxxxx")!important;
	background-size:100%!important;
  }

.fc-webicon.instagram {
    background: url("https://youraccount.com/l/media?f=xxxxxxxxxxx")!important;
	background-size:100%!important;
  }

.fc-webicon.youtube {
    background: url("https://youraccount.com/l/media?f=xxxxxxxxxxx")!important;
	background-size:100%!important;
}
	
.fc-webicon.linkedin {
    background: url("https://youraccount.com/l/media?f=xxxxxxxxxxx")!important;
	background-size:100%!important;
}
</style>
Captura de pantalla de campo CSS del editor de tarjetas
Editor de plantillas CSS de las tarjetass de visita

6. Aplica la nueva plantilla a tu tarjeta de visita

Selecciona la plantilla CSS que acabas de crear para la/s tarjeta/s de visita que quieres que tenga/n tus iconos de redes sociales personalizados.

Captura de pantalla del menú Branding
Selector de plantillas del menú de personalización

Recursos

Los siguientes enlaces contienen iconos personalizados que puedes utilizar para tus tarjetas de visita digitales.

Última actualización hace 7 mess