How to add an icon to a Squarespace button
Are you looking to add an icon to a Squarespace button, inside the button border?
I have a handy solution for you in today’s post!
I did this recently for a client of mine that was launching an app. They wanted the little App store icons as buttons to click to download the app.
Here’s how the buttons turned out:
It’s pretty easy to do this by using icons from the FontAwesome library. So first, you need to add the library to your content.
Step 1:
Open your Squarespace backend and navigate to Code Injection. You’ll find this by clicking Settings > Advanced > Code Injection
(If you’re on a Personal plan unfortunately you won’t be able to do this!)
In the space called Header, copy and paste the following:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">Once you’ve done this it’s time to create your button.
Step 2:
Decide where you want to place your button and add a Button Block.
Copy this HTML into the Button Block’s Text field. This example will give you a long rectangular button with the Android icon. You can see the huge range of icons on the FontAwesome site.
<span style="margin-right:40px;margin-left:40px; margin-top:-10px;margin-bottom:-15px;color: black;"
class="fa fa-android fa-3x"></span>Switch up the icon:
I’d recommend visiting FontAwesome’s gallery and doing a quick search for the icon you want. Once you’ve found it, copy the icon’s name into the above line. A word of warning, you might have to play around a bit! The website said the name of icon I used in the example was “fas fa-android” but that didn’t work for me so I tried ‘fa fa-android’ which did the trick.
Change the size of the icon:
You’ll notice there’s a “fa-3x” in this code. This means the icon will be 3 times bigger than its original size. You can adjust this depending on the size you want. Sub in the below to change the size.
fa-xs
fa-sm
fa-lg
fa-2x
fa-3x
fa-5x
fa-7x
fa-10xChange the size of the button:
You can play around with your button size by adjusting the margins. For example if you want a smaller button simple use:
<span style="margin-right:8px;color: black;" class="fa fa-android fa-3x"></span> Add text to your button:
If you’d like some text to sit beside the icon simply add it at the end of the code:
<span style="margin-right:8px;color: black;" class="fa fa-android fa-3x"></span>DownloadChange the icon colour:
Changing the colour of your icon is easy. All you need to do is swap out the word ‘black’ for your chosen colour!