Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Font Awesome icons in Squarespace buttons


polizzi

Question

Hi,

I've been successfully pasting tags for Font Awesome icons into button text fields up until today when the icons suddenly disappeared. When I try to replace them, they no longer work. If I enter something like this:

    Learn more about us ︁<i class="fa-regular fa-circle-arrow-right"></i>

I get this:

    Learn more about us ︁&lt;i class="fa-regular fa-circle-arrow-right"&gt;&lt;/i&gt;

And no icon shows up.

Squarespace support hasn't provided an answer. Has anyone else encountered this problem? 

Thanks,

john

 

Link to comment

7 answers to this question

Recommended Posts

  • 0

If I had to guess I'd say SS didn't intend for HTML to go into the button block Text field and have closed that loophole.

If you want to restore the effect you'd need to use Javascript to insert the HTML.

Folks. In general unless SS indicates that HTML can be input somewhere you may not want to do this. At some point SS will most likely fix the loophole.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Thank you, creedon. Thank you, tuanphan. 

I'm using psuedo to apply icons in other parts of my design. But having the ability to drop different icons into specific buttons was very helpful. I know I can use CSS and unicode to target individual buttons, but doing so for a range of buttons across multiple pages would be a pain to create and manage. 

Squarespace support would neither confirm nor deny that they closed the loophole. They only told me they can't help with custom code. But talking to support at Font Awesome, they claimed to be aware of other customers using the same method to insert icons into buttons on Squarespace. It seems strange that Squarespace would intentionally remove functionality that supports such a hugely popular and easy-to-use icon service. (Unless, maybe, Squarespace was planning to acquire or partner with some alternate icon provider.)

Link to comment
  • 0

I just ran up against this and had a very frustrating chat with "support" regarding the issue. This has worked since the beginning of time. I have multiple clients using icons on buttons to indicate downloads, external links, etc. It does seem strange to remove the easy-to-use and popular functionality. It might be that engineering doesn't even know they inadvertently did this -- the support guy said they are not allowed to report it to the engineering team.

★ Official Squarespace Specialist since 2014 ★ Get our monthly SEO Newsletter 

Link to comment
  • 0
3 hours ago, ChristineDarby said:

It does seem strange to remove the easy-to-use and popular functionality.

I don't speak for SS but here is my guess. Unless the documentation said it was a feature to enter HTML in a field then it was a bug as far as SS is concerned. So they fixed the bug and removed what wasn't a feature but a loophole that people took advantage of.

If you want the same end behaviour then you'll need to use one of the methods mentioned above.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
1 hour ago, ChristineDarby said:

I have multiple clients using icons on buttons to indicate downloads, external links, etc. It might be that engineering doesn't even know they inadvertently did this.

I can understand why this change is frustrating. Nothing upsets me (and clients) more than changes that are made without notice. It's not cool when sites break.

Having said that, adding HTML to text labels is not considered good practice. It was, as @creedon described, a loophole. A loophole that many people enjoyed, but a loophole nonetheless. Squarespace are gradually removing loopholes like this by performing 'input validation' to remove HTML. This is good coding practice as it ensures that only properly formatted text is entered into the system. It reduces errors and helps to prevent attacks - something that is of ever increasing importance. The Button Block Editor was recently updated so it's natural that they took the opportunity to add validation to this too. 

There are better ways to add icons, for example, using CSS pseudo selectors and/or JavaScript. The solution will depend on the specifics of the site, so if you need help please post some details.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...