How to add custom Icons to your Squarespace website.
How To Add Fontawesome Icons In Squarespace
What Is Font Awesome?
Font Awesome is a remarkable online resource that empowers you to seamlessly incorporate pre-designed icons into your website. The beauty of it lies in the fact that it offers a selection of both free and premium icons, with the majority of my personal favorites being available completely free of charge. It's a win-win situation! These icons not only elevate your site's visual appeal but also grant you the creative freedom to customize their colors, sizes, and even add captivating animations.
Today, I'm excited to walk you through the process of integrating Font Awesome into your website. Plus, I'll reveal a clever Squarespace hack that's about to revolutionize the way you use these icons. Get ready to unlock a world of design possibilities!
Installing Font Awesome on Your Squarespace Website
SIGN UP FOR A FREE FONT AWESOME KIT
To get started with Font Awesome, the first step is to visit FontAwesome.com. There, you'll be prompted to enter your email address. Once you've provided your email, you can request your Kit Code by clicking the corresponding option. Now, check your email inbox for a message from Font Awesome and proceed to confirm your email address. Once your email is verified, you're all set to begin the setup process and explore the world of Font Awesome icons.
Embed Font Awesome Code into Squarespace
Follow these steps for a seamless integration of Font Awesome into your Squarespace site. First, access your Font Awesome Kit and copy the Kit Code. It will be structured as follows, with your unique ID replacing the placeholders:
Font Awesome Kit Example:
<script src="https://kit.fontawesome.com/##########.js" crossorigin="anonymous"></script>
Now, navigate to your Squarespace Dashboard and proceed to Settings. From there, head to the Advanced section and locate Code Injection. Here, you can paste the previously copied Code into the Header Box. Don't forget to save your settings, and you're all set to enjoy Font Awesome on your Squarespace site.
Select Your Desired Icon from Font Awesome
Embark on a creative journey with an expansive selection of 1,577 free Font Awesome icons. These icons cover a wide spectrum of categories and styles to suit your design needs. To make your selection, simply click on the icon that resonates with your vision. Beneath each icon, you'll find its associated HTML code. It's as easy as clicking the HTML code to copy it. This straightforward process empowers you to integrate the chosen icon seamlessly into your design, adding that special touch that Font Awesome is renowned for. Explore the possibilities and elevate your visual content effortlessly with Font Awesome's diverse icon library.
Integrate Font Awesome Icons into a Squarespace Page
Choose the Squarespace page of your preference, insert a code block, remove any existing text, and paste your Font Awesome code. After this, simply click to save your page settings, and you're all set – your Squarespace site is now adorned with Font Awesome icons!
How To Add FlatIcons In Squarespace
Explore Flaticon
Begin your icon quest by seeking the specific icon you desire. Flaticon offers an extensive array of both static and animated icons to choose from. After initiating your search, you have the option to further narrow down your selection by applying filters for color and shape.
Click on the Icon you want to use
Download the Icon
If you come across an icon that you liked, but the color doesn't quite align with your design vision, fret not. By registering for a free account, you gain the ability to customize the icon's color to harmonize with your website's aesthetics. Simply click on the "Edit icon" button located at the top right-hand corner of the pop-up. Do note that this option might not be accessible for every icon, so don't worry if you don't spot the button on certain selections.
Add the Icon to your Squarespace site
Once you've saved the icon of your choice and it's safely in your possession, it's time to seamlessly integrate it into your Squarespace site. Begin by clicking on the "Edit" option for the specific page where you wish to incorporate the icon. Then, select "Add Block" and opt for the "Image Block." From there, it's a straightforward process of uploading the icon.
You're not limited to Flaticon when it comes to selecting icons for your website. I personally appreciate Flaticon for its extensive and diverse collection of icons that can easily be uploaded to enhance your Squarespace site.
How To Add Canva Icons In Squarespace
1. Generate a Compact Canva Document
Our suggestion is to keep your Canva document's height under 150 pixels. Additionally, it's advisable to ensure the width is a minimum of 200 pixels.
2. providing a wider dimension compared to its height.
3. Go To Elements And Search icons > Graphics
4. Enhance Your Design by Adding Shapes and Customizing Colors to Reflect Your Brand
5. Save the File in PNG Format with a Transparent Background
6. Use An Image Block In Squarespace To Place Your Icon
You have the option to employ an Image Block along with a Text Block positioned either below or beside it. Alternatively, you can opt for an Image Stack or an Image Card Block.
By implementing custom icons in this manner, you can enhance the professionalism, visual appeal, and readability of your website. This, in turn, can result in longer visitor engagement, increasing the likelihood of visitors making bookings or purchases from your site.
How To Add Google Icons To Squarespace Website
Embed Code in the Page Header
Simply copy and paste the provided code into your page header. You can access the page header for this by going to Settings, then Advanced, and selecting Code Injection.
Choose Method to Embed/Reference Icon
Select a method for utilizing the icon on your website – there are three ways to reference or embed it:
Incorporate it within a Code Block and reference it by name.
Attach it to an h4 heading by using a Code Block.
Opt for an h5 heading and employ a Markdown Block to make a reference to the icon.
Leveraging custom CSS provides the flexibility to modify its size, color, and other text-related attributes as needed.
Open Code Block
To incorporate an icon within a code block while editing your pages, follow these steps:
Insert the icon's name into the class attribute as illustrated in this example for the "water_drop" icon:
Copy the code provided below.
HTML:
class="material-icons"
water_drop
Use Markdown blocks to associate it with a heading
Generate and allocate a Font Family (h5) through a Markdown Block — You have the option to assign the icon font family to a particular text style or font family, such as h5. Ensure that you assign the font family to Material Icons by implementing the provided code into your site's custom CSS. Customize the other properties and values that are highlighted in bold as indicated below.
To assign this code to h5, insert it into your site's custom CSS.
Access the Custom CSS settings by following one of these methods:
Go to Settings, then Design, and select Custom CSS.
Alternatively, you can use this URL: "https://your-website.squarespace.com/config/design/custom-css." Make sure to replace "your-website" in the link with your actual website URL.
Copy and paste the provided code into your Custom CSS:
Customize the icons by modifying their size and color using the section highlighted in bold:
CSS:
h5 {
font-family: Material Icons;
font-size: 4rem;
color: blue;
}
Alternatively, adjust the icons to your liking by changing the size and color properties in the following code:
CSS:
h5 {
font-family: Material Icons;
font-size: 4rem;
/* Adjust the size as needed */
color: blue;
/* Modify the color to your preference */
}
Feel free to tailor the size and color to meet your specific design requirements.
To reference the Font Family, utilize a Markdown Block in the following manner while in page editing mode:
Insert a Markdown Block.
Type "##### (name of the icon you want to reference)" within the block.
Link with an Existing Font Family
Please follow the same procedure as previously instructed, but this time, apply the changes to h4. Here's the code to add to the Custom
Customize the icons by modifying their size and color using the section highlighted in bold:
CSS:
h4 {
font-family:
Material Icons;
font-size: 4rem;
color: blue;
}
You can adjust the size and color as needed to achieve your desired design.
