This website uses necessary cookies to ensure that our website is ideally usable. We do not use cookies that process personal data without your prior consent. Read our Cookie Policy

Replace social icons on my QR Code Business Card

book reader icon
1 Minute
facebook logo gray
linkedin logo gray
mail logo gray
Replace social icons on my QR Code Business Card

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.

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

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. Log in to your account

Log in to your account.

Login

Login
Login Form

2. Go to your Media section

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

Media section
Media section

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

4. Copy the image URL of your social media icons

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

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

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

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

Business card template selector
Business card template selector

Resources

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

Last update 1 week ago