Easy way to add thousands of free icons to Squarespace
I ran into an inspiring blog post yesterday. Rasmus from sparkplugin.com wrote a tutorial How to add Font Awesome icons to Squarespace. However it left me wondering — could we use icon fonts without any coding?
Demo – what we’ll be creating
What are icon fonts?
We want to use icons in websites. But we’d also like to change the size, color and shape. We want them to be sharp on any size. We want animations and hover-effects.
None of those are possible using an image. But with a font they’re easy.
Why not use icon font, as a font?
This got me thinking. If it’s a font, meaning we can write with it — then why should we use code blocks and custom code like this
Wouldn’t it be nicer to just write names of the icons, and “poof!” magically turn them to icons? Then easily change color, size, position.
Turns out we can.
The example above uses a font from the Google Material Icons. I decided to use the strikethrough to enable the font. I never really use it. But if you do, we could use strikethrough + italic. You’ll never use both in the same text.
A practical example
Here’s a common use case I had in the beginning. A grid of text columns with an icon for each. A super quick and easy way to make it visual, eye-catching and pro. Just turn words to icons with 1 click.
Installing Google Material Icons
Installing in less than 60 seconds
1) Add this to Code injection header
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">2) Add this to your Custom CSS
// Material Design Icons on strikethrough
span[style*="line-through"] {
text-decoration: none !important;
font-family: 'Material Icons'
;}3) Add the icon name from https://fonts.google.com/icons
4) Click strikethrough to enable the icon font for this word
I like Font Awesome better but Google Material Icons are easier for this example. You could do the same with Font Awesome however. For this to work on Font Awesome you’ll need to install the desktop version of their font. If want, I can add a tutorial video here. Let me know.
Installing Font Awesome
Hello, World!
Few more steps but worth it.
Download these webfonts. They’re converted from desktop otf to web format woff2 so they contain the “ligatures” that makes this stuff work.
Add the code below to Custom CSS
3) Upload the font files in your Custom CSS Custom files and replace the urls
4) In a text block get icon names from here and style:
strikethrough for icons
strikethrough + bold for solid
strikethrough + italic for brands
Pros and Cons?
Using as a font
+ So. Easy. To. Use.
+ Easier to align center or right
+ Easier to create links
+ Easier to quickly resize multiple icons
+ Using anywhere
+ Super easy with Material Icons.
- Desktop font files with ligatures have larger filesize
Using the Custom code + HTML
+ animations
+ more custom sizes
+ easier to install with Font Awesome
+ easier to have multiple styles like outline, rounded etc.
- having to use code blocks and custom html
My professional opinion?
This is a pretty cool solution. It’s crazy fast & easy to use. It'll definitely add extra clarity and visual appeal to your Squarespace site.
However. My personal 100% honest preference is that neither the Google Material Icons or Font Awesome is visually as pleasant as Streamline Icons for example. For my clients I’d use something more visually pleasant if we we’re doing branding. Font Awesome & Google Material icons are just not drawn as well. So if you really want to look pro and have your branding be on point, I’d invest a little extra time and money to buy Streamline or other premium icon packs.
Need help with Squarespace?
An annoying Squarespace problem bugging you? Let me fix it for you. I’m a professional freelance Squarespace specialist with 10 years of experience. I know Squarespace inside out, which is the reason I have 4000+ customers in 78 countries who say nice things like:
"A Squarespace dev & design genius"
-Rosanna Chipkin / faitcreativecontent.com
My latest full redesign brought 10x conversion rates for my client. If use Squarespace and want your site to really work, not just look nice — hit me up. We can great results in just a few hours of screensharing.
-Fenix