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

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

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

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.

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 2 months ago

What is a call-2-action (C2A) button?

Call-2-action buttons on a landing page offer a user a specific action e.g. initiate call or download a PDF that will be triggered when the button is pressed.

What is a call-2-action (C2A) button?

HTML & CSS Guide

When creating a Landing Page you can add any HTML or CSS code in your text area boxes. The following guide give you some ideas about styling possibilities or how to embed multimedia content.

HTML & CSS Guide