ZAY.

View Original

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-10x

  • Change 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>Download

  • Change 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!

Hope that was helpful. Can’t wait to see your kickass custom buttons!