Adding an icon to a vCard button enhances the user interface and makes the button more visually appealing.
This guide will take you through the process step by step, ensuring clarity and ease of implementation.
What is a vCard?
A vCard is a virtual contact card that allows you to share your contact details digitally.
It includes information such as your name, phone number, email address, and more.
vCards are commonly used for networking, making it easy for others to save your contact information with a single click.
How do I add a vCard button to my bio page?
You can add one or multiple vCard widgets to your bio page to share your contact information conveniently.
Steps to add a vCard to your bio page:
-
Create your bio page: Ensure you have a bio page set up on your account.
-
Click “Add Link or Content”: Find this button in the bio page editor.
-
Search for vCard: Use the search feature to locate the vCard widget.
-
Add your details: Fill in your contact information in the vCard fields.
-
Save: Click “Save” to add the vCard to your bio page.
How do I add a Font Awesome icon to my vCard button?
Follow these steps to include a Font Awesome icon in your vCard button:
Step 1: Add the CSS code
-
Locate and enter the Bio Page where you want to add the icon.
-
Navigate to the Bio Page Settings Tab and scroll down to the bottom.
-
Copy and insert the following CSS code into the custom CSS section.
form[action="?downloadvcard"] .btn-custom {
position: relative; /* Make the button a positioned container */
display: flex; /* Flexbox ensures the content stays aligned */
justify-content: center; /* Centers the text */
align-items: center; /* Vertically center the text */
}
form[action="?downloadvcard"] .btn-custom::before {
content: "\f2b9"; /* Unicode for the fa-address-book icon */
font-family: "Font Awesome 6 Free"; /* Font family for Font Awesome 6 */
font-weight: 900; /* Font weight for 'solid' style */
font-size: 33px; /* Set font size for the icon */
position: absolute; /* Position the icon absolutely inside the button */
left: 25px; /* Move the icon to the left or right side of the button */
transform: translateX(-50%); /* Fine-tune the icon's position */
z-index: 1; /* Ensure the icon is above the button content */
top: 4px; /* Ensure the icon is in the top center */
}
form[action="?downloadvcard"] .btn-custom span {
padding-left: 40px; /* Add padding to the left of the text to avoid overlap */
}
Step 2: Save your changes
After adding the code, click somewhere outside the CSS area to save your custom CSS.
Then, preview your bio page to ensure the icon appears correctly next to your vCard button.
How can I change the Font Awesome icon for the vCard button?
You can replace the Unicode value in the content property with any Font Awesome icon of your choice.
content: "\f2c1"; /* Change this unicode with your desired icon */
Follow these steps
-
Visit the Font Awesome website for free icons.
-
Search and find your desired icon.
-
Click on the icon to open the icon window.
-
Then, click on the icon unicode to copy.
-
After you copied the code, come to your Bio Page CSS section,
-
Replace the
content unicodewith your icon unicode
FAQs
Can I create a free bio page at Linko?
Yes, you can create a bio page for free on Linko with all features except for custom CSS, which is available only on paid plans.
What is the purpose of adding an icon to the vCard button?
Adding an icon improves the visual appeal and usability of the button, making it more intuitive for users to recognize its function.
Do I need a paid plan to add custom CSS to my bio page?
Yes, custom CSS is available only on paid plans. Free users can create bio pages with all other features and widgets.
Can I edit or remove my vCard after adding it?
Yes, you can edit or remove your vCard widget anytime from the bio page editor.