How To Easily Add Font Awesome Icons To Squarespace

How To Add Font Awesome Icons To Squarespace

In this video tutorial we will be showing you how to easily add Font Awesome icons to your Squarespace website. We'll take a look at how to style them and some examples of them in use, like adding social media icons to your navigation bar and why you might want to use Font Awesome over simply creating your own in Adobe Photoshop or Illustrator

This is actually a very simple process but as it's not a standard feature in Squarespace it can seem a little confusing at first. Hopefully this easy to follow tutorial will cut through the confusion and allow you to add beautiful fully scalable vector icons that will look great across all devices on any screen size. let me know your thoughts in the comments section if you found this useful and check back for more tutorials and tips over the coming weeks.

 

Header Code Injection

Simply copy and paste this code into your Header Section in the Code Injection area of the Advanced Section.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 

Icon Code Block

Simply copy and paste this code into a Code Block on your page and then style with CSS.

<div class="icon">
  <i class="fa fa-desktop fa-3x" aria-hidden="true"></i>
</div>

<h2 class="icon-title">
  Web Design
</h2>

<p class="icon-p">
  The following text is placeholder known as lorem ipsum, which is scrambled Latin used by designers to mimic real copy.
</p>
 

CSS Code

Simply copy and paste this code into your Custom CSS style editor in the Design Tab to style it like our demo.

.icon-title {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 30px;
}
.icon-p {
  text-align: center;
}
.icon {
  text-align: center;
}