Replace social icons on my QR Code Business Card

1 Minute

11/17/2022

Replace social icons on my QR Code Business Card

How do I replace the social icons in my business cards?
Resources

The default social media icons on a digital business card are kept as neutral as possible so that they work with all designs. In case you want to add some custom flair to your business card landing pages you can use your own in a matter of minutes.

You only need to upload the logos that you want to use in the media section and add this code on the Branding section of your business card or to your templates.

1. Go to your Media section

You can either upload the files on your Media section or host them in your own server.

2. Upload the icons that you want to use

Click on Add Image and select your files. We recommend SVG format for optimal result and copy the image URL of each of the images.

Media section add file — Media section upload image

Click on the pencil of the images of your media section and copy the image URL of the social media icons that you want to use.

Media section image dialog — Media section image details

4. Create a new CSS template

Go to the Branding section of your business card and click ion Add to create a new Business Card CSS template.

Branding section - New template — Digital business card Branding section

5. Add the CSS code to replace your icons

Paste the code below using the images paths of your images and Save your new template when ready.

<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>

New CSS template — Business card CSS template editor

6. Apply the new template to your business card

Select the CSS Template that you have just created for the business card/s that you want to have your custom social media icons.

Resources

The following links contain custom icons you can use for your digital business cards.