How do I create inline icon buttons (ie. social media links)?
Have you ever looked at the social media icons in your Nucleus's footer and wondered if you could do something similar but as part of the content on a regular page? Maybe you want social media icons attached to a staff member, or just want to dress up a fancy button. Either way, prepare to get your hands a little dirty with some HTML and CSS and keep reading for a quick how-to.
Step 1: The HTML
The following code would be placed into an HTML Block on your desired page.
<div class="icon-buttons">
<a href="https://facebook.com" class="facebook" target="_blank"><i class="ion-social-facebook"></i><span>Facebook</span></a>
<a href="https://twitter.com" class="twitter" target="_blank"><i class="ion-social-twitter"></i><span>Twitter</span></a>
<a href="https://youtube.com" class="youtube" target="_blank"><i class="ion-social-youtube"></i><span>YouTube</span></a>
<a href="https://pinterest.com" class="pinterest" target="_blank"><i class="ion-social-pinterest"></i><span>Pinterest</span></a>
<a href="https://linkedin.com" class="linkedin" target="_blank"><i class="ion-social-linkedin"></i><span>LinkedIn</span></a>
<a href="https://whatsapp.com" class="whatsapp" target="_blank"><i class="ion-social-whatsapp"></i><span>WhatsApp</span></a>
<a href="https://anchor.fm" class="rss" target="_blank"><i class="ion-social-rss"></i><span>RSS</span></a>
<a href="mailto:email@domain.com" target="_blank"><i class="ion-ios-email"></i><span>Email</span></a>
</div>All you need to update in this code for each button is the href="" and the text inside the <span></span> tag. If you don't want to use an icon button in the sample code above, just remove the entire <a href="....></a> for that icon button.
You'll notice that every link here except for the last has a class attached to it. Don't remove this class for your social icons if you plan to enable social colours (keep reading for how to do this).
How to change the icon itself:
Nucleus uses the Ionic Framework and they provide a number of great icons to use. All you need to do to create your own button with a unique icon is to copy one of the <a href=".....> lines of code above and paste it in the order you want, then simply update the class of the <i> element inside that link. For example, you can see that the <i> inside the first Facebook link has a class of "ion-social-facebook."
Just load up Ionic's Icon Cheatsheet here: https://ionic.io/ionicons/v2/cheatsheet.html
Then find the icon you want to use and copy the "Classname" listed for the icon and replace the class of the new link's <i> with that. For example, if I wanted a button that had a compass icon with the text "Get Directions" that took the user to my contact page, I would do something like this using Ion's "ion-compass" icon:
<a href="https://link-to-my-contact-page.com" target="_blank"><i class="ion-compass"></i><span>Get Directions</span></a>And I'd end up with something like this:
Note: The icon library Nucleus uses does not include the latest Instagram icon, so if you want to use Instagram, you'll need to use the following HTML for that link specifically instead:
<a href="https://instagram.com" class="instagram" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-social-instagram"><path d="M349.33 69.33a93.62 93.62 0 0 1 93.34 93.34v186.66a93.62 93.62 0 0 1-93.34 93.34H162.67a93.62 93.62 0 0 1-93.34-93.34V162.67a93.62 93.62 0 0 1 93.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z" fill="currentColor"></path><path d="M377.33 162.67a28 28 0 1 1 28-28 27.94 27.94 0 0 1-28 28zM256 181.33A74.67 74.67 0 1 1 181.33 256 74.75 74.75 0 0 1 256 181.33m0-37.33a112 112 0 1 0 112 112 112 112 0 0 0-112-112z" fill="currentColor"></path></svg><span>Instagram</span></a>
hide the text next to the icon:
By default, the text inside of the <span></span> tag next to the icon will be shown. If you just want the icon on its own, just add a class of "no-text" to the main div:
<div class="icon-buttons no-text">
Enable Social Media Colours:
If you'd like the supported Social Media icons (Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, RSS, and WhatsApp) to have a background color unique to that network, then add the class of "social-colors" to the main div.
<div class="icon-buttons social-colors">Feel free to combine the social-colors class with the no-text class as well:
<div class="icon-buttons social-colors no-text">Step 2: The CSS
You'll want to add this CSS to the Code Injection area of your Nucleus Settings, so that it applies site-wide, enabling you to use the HTML above on any page you'd like. I've added comments to the CSS to explain the parts that you can easily adjust to your needs.
<style type="text/css">
:root {
/* Change these variables to set the basic colours. If you enable Social Colors then that will take precedence for the supported social icons. */
--icon-font-color: #fff;
--icon-background-color: #333;
/* Change these variables to set the overall size of the button and icons. The larger the value, the larger the size (and border-radius). */
--icon-size: 20px;
--icon-hover-scale: scale(1.1);
--button-size: 30px;
--icon-with-text-border-radius: 15px;
/* Change this variable to adjust the size of the text, if you've chosen to display the text. */
--icon-font-size: 12px;
/* If you chose to have unique colors for the buttons based on the social media network, then these are the values that are used.
Currently supported networks for the unique coloring are: Facebook, Instagram, Twitter, YouTube, Pinterest, LinkedIn, RSS, and WhatsApp.
Feel free to add more yourself if you know the CSS required. */
--facebook-color: #1877f2;
--instagram-color: #c32aa3;
--twitter-color: #1da1f2;
--youtube-color: #ff0000;
--pinterest-color: #bd081c;
--linkedin-color: #0a66c2;
--rss-color: #ee802f;
--whatsapp-color: #25d366;
}
/* DO NOT CHANGE ANYTHING BELOW UNLESS YOU'RE FAMILIAR WITH CSS */
.icon-buttons {
display:flex;
flex-wrap: wrap;
width: auto;
margin-left: -5px;
margin-right: -5px;
}
.icon-buttons a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--button-size);
height: var(--button-size);
margin: 5px;
padding: 10px 15px;
transform: scale(1);
transition: 0.2s ease transform;
background-color: var(--icon-background-color);
border-radius: var(--icon-with-text-border-radius);
color: var(--icon-font-color);
}
.icon-buttons a:hover {
transform: var(--icon-hover-scale);
}
.icon-buttons a i {
font-size: var(--icon-size);
line-height: var(--button-size);
}
.icon-buttons a svg {
width: var(--icon-size);
}
.icon-buttons a span {
display: inline-block;
margin-left: 5px;
padding: 0;
font-family: inherit;
font-size: var(--icon-font-size);
font-weight: 900;
line-height: var(--button-size);
text-transform: uppercase;
}
.icon-buttons.no-text a {
width: var(--button-size);
padding: 0;
border-radius: 50%;
}
.icon-buttons.no-text a span {
position: absolute;
font-size: 0;
}
/* Social Colors */
.icon-buttons.social-colors .facebook {
background-color: var(--facebook-color);
}
.icon-buttons.social-colors .instagram {
background-color: var(--instagram-color);
}
.icon-buttons.social-colors .twitter {
background-color: var(--twitter-color);
}
.icon-buttons.social-colors .youtube {
background-color: var(--youtube-color);
}
.icon-buttons.social-colors .pinterest {
background-color: var(--pinterest-color);
}
.icon-buttons.social-colors .linkedin {
background-color: var(--linkedin-color);
}
.icon-buttons.social-colors .whatsapp {
background-color: var(--whatsapp-color);
}
.icon-buttons.social-colors .rss {
background-color: var(--rss-color);
}
</style>The best part... demos!
Default option:
Social Colors enabled:
Just the Icons:
Just the icons with Social colors enabled:
And that's a wrap - I hope you found this article helpful! If you have any questions, tag me (Mike Lee) in a post on the Nucleus Insiders Facebook Group and I'll do my best to help!
P.S. (Pro Tip): If you'd prefer to use a different icon library than Nucleus' built-in Ionic Icons, you can do that! I highly recommend FontAwesome. Just get that FontAwesome script added to your site via their instructions on the site, and once you've got it loading on your Nucleus, you should be able to simply replace Ionic Icon's class names in the <i> tags with Font Awesome's instead. I have not tested this, however, so some tweaking may be required to get it to work just right.
