Website Building » Squarespace » How Do I Use Font Awesome in Squarespace?

How Do I Use Font Awesome in Squarespace?

Last updated on October 1, 2022 @ 9:21 am

Font Awesome is a great way to add extra flair to your Squarespace website. With just a few clicks, you can add custom fonts, icons, and logos to your pages. Here’s how:

First, log in to your Squarespace account and go to the “Design” tab. Then, click on the “Custom CSS” option.

In the Custom CSS editor, paste the following code:

@import url(“https://use.fontawesome.com/releases/v5.0.6/css/all.css”);

This code will import the Font Awesome library into your Squarespace site.

PRO TIP: Please be aware that using Font Awesome in Squarespace can result in your site looking broken or unprofessional. We recommend only using this guide if you are comfortable with HTML and CSS and are confident in your ability to troubleshoot any issues that may arise.

Next, find the element on your page that you want to style with a Font Awesome icon. For this example, we’ll use a heading element.

In the Custom CSS editor, add the following code:

h1:before {
font-family: “Font Awesome 5 Free”;
content: “\f1e9”; /* this is the Unicode character for the heart icon */ /* make sure to change this to the icon you want */}

h1 {font-size: 48px;} /* optional – increase the size of the heading */

The first line of code above defines which font family to use for the icon – in this case, “Font Awesome 5 Free”. The second line specifies the Unicode character for the heart icon – you’ll need to look up the character code for the icon you want to use. The third line is optional – it increases the size of the heading element so that the icon is more visible.

Finally, save your changes and preview your page to see your new Font Awesome icon!

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.