Add Social Media icons with hover effect in Cargo Site
Why is important to have Social Media Icons?
Adding social media icons to your website is like putting up signs that point to your Facebook, Twitter, and Instagram pages. It helps people find you on different platforms and even become followers.
These icons don’t take up much space, but they catch people’s attention and make it easy for them to connect with you on social media. It’s a simple way to let visitors know where else they can find you online.
Plus, we’re going to learn how to make them even cooler with hover effects! These effects will make the icons change when someone hovers over them, adding some extra flair to your website.
Remember, these are not the same as buttons for sharing content on social media. Adding them to your website can help you reach more people and engage with your audience beyond just your site.
Let’s see how to Add Cool Social Media icons effect in both Cargo 2 and Cargo 3 Site editor.
Add Social Media icons in Cargo 3
To add social media icons, we’re going to use Font Awesome icons instead of the default icons provided by Cargo. Follow these simple steps to add social media icons in Cargo 3:
STEP 1 – Open your Cargo 3 editor. Go to the Global Cargo Site editor by clicking on the Code icon.
STEP 2 – First, let’s add the link to the Font Awesome library. We’ll be using Font Awesome 4.
Font Awesome 4 Website – Click here
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
STEP 3 – After adding the CDN, go to the page where you want to add the Social Media Icons. Open the page’s local editor, navigate to the HTML section, and paste the HTML code for the social media icon.
Don’t forget to update the href attribute with your own social media URLs. Right now, the icons are linked to the main websites of each social media platform.
<div class="social-icons">
<a class="social-icon twitter" href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="social-icon dribbble" href="https://dribbble.com" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="social-icon facebook" href="https://facebook.com" target="_blank"><i class="fa fa-facebook-f"></i></a>
<a class="social-icon instagram" href="https://instagram.com" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="social-icon envelope" href="mailto:[email protected]" target="_blank"><i class="fa fa-envelope"></i></a>
</div>
STEP 4 – To add the icons of your choice go to the Font Awesome 4 icons library, Search for the icon, and copy the code.
STEP 5 – Then switch to CSS and paste the CSS to style the CSS icons. You can customize the CSS if you need any help add your question to the Discussion Forum.
.social-icons {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.social-icon {
display: flex;
position: relative;
overflow: hidden;
width:64px;
height: 64px;
margin: 8px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon i {
margin: auto;
font-size: 24px;
z-index: 1;
transition: all 0.3s ease;
}
.social-icon:after {
content: "";
width: 64px;
height: 64px;
position: absolute;
transform: translate(0, 64px);
border-radius: 50%;
transition: all 0.3s ease;
}
.social-icon.twitter {
color: #1da1f2;
}
.social-icon.twitter:after {
background-color: #1da1f2;
}
.social-icon.dribbble {
color: #ea4c89;
}
.social-icon.dribbble:after {
background-color: #ea4c89;
}
.social-icon.instagram {
color: #ea4c89;
}
.social-icon.instagram:after {
background-color: #ea4c89;
}
.social-icon.facebook {
color: #1769ff;
}
.social-icon.facebook:after {
background-color: #1769ff;
}
.social-icon.envelope {
color: #24292e;
}
.social-icon.envelope:after {
background-color: #24292e;
}
/*** Animations ***/
.social-icon:hover {
cursor: pointer;
transform: translateY(-4px);
box-shadow: 0px 4px 12px rgba(0,0,0,0.16);
}
.social-icon:hover i {
color: #fff;
}
.social-icon:hover:after {
transform: translate(0) scale(1.2);
}
If you want to change the color of the Twitter icon, for example, you can do so by modifying the CSS properties. Change the color property of .social-icon.twitter to adjust the icon’s color. To change the color when hovering over the icon, modify the background-color property of .social-icon.twitter:after.
Add Social Media icons in Cargo 2
STEP 1 – To add social media icons in Cargo 2, navigate to the Cargo 2 editor and go to the page where you want to include the icons. Then, switch to the “Code View” and paste the provided HTML code directly into the editor.
<div class="social-icons"><a class="social-icon twitter" href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="social-icon dribbble" href="https://dribbble.com" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="social-icon facebook" href="https://facebook.com" target="_blank"><i class="fa fa-facebook-f"></i></a>
<a class="social-icon instagram" href="https://instagram.com" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="social-icon envelope" href="mailto:[email protected]" target="_blank">
<i class="fa fa-envelope"></i>
</a>
</div>
STEP 2 – Now, head over to the ‘Design’ tab, and locate the ‘Custom HTML’ section. Paste the provided code below. This code contains the CDN link for Font Awesome 4 and the CSS needed to style the icons.
If you need any help with Code drop your question to the Discussion Forum.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.social-icons {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.social-icon {
display: flex;
position: relative;
overflow: hidden;
width:64px;
height: 64px;
margin: 8px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon i {
margin: auto;
font-size: 24px;
z-index: 1;
transition: all 0.3s ease;
}
.social-icon:after {
content: "";
width: 64px;
height: 64px;
position: absolute;
transform: translate(0, 64px);
border-radius: 50%;
transition: all 0.3s ease;
}
.social-icon.twitter {
color: #1da1f2;
}
.social-icon.twitter:after {
background-color: #1da1f2;
}
.social-icon.dribbble {
color: #ea4c89;
}
.social-icon.dribbble:after {
background-color: #ea4c89;
}
.social-icon.instagram {
color: #ea4c89;
}
.social-icon.instagram:after {
background-color: #ea4c89;
}
.social-icon.facebook {
color: #1769ff;
}
.social-icon.facebook:after {
background-color: #1769ff;
}
.social-icon.envelope {
color: #24292e;
}
.social-icon.envelope:after {
background-color: #24292e;
}
/*** Animations ***/
.social-icon:hover {
cursor: pointer;
transform: translateY(-4px);
box-shadow: 0px 4px 12px rgba(0,0,0,0.16);
}
.social-icon:hover i {
color: #fff;
}
.social-icon:hover:after {
transform: translate(0) scale(1.2);
}
</style>
STEP 3 – Pick an icon you like from the Font Awesome 4 library explained above(in the Cargo 3 section) and add it to your Cargo 2 website. Then, change how it looks using the instructions provided for the CSS customization.
Congratulations, We have successfully added Social Media icons to Cargo Site🚀.
If you are facing any difficulty in implementing code feel free to add your question in the Discussion Forum – https://cargotutorials.com/cargo-site-support-discussion-forum/
