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
You can either upload the files on your Media section or host them in your own server.
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 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 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.
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>
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.
Resources
The following links contain custom icons you can use for your digital business cards.