polizzi

Add to Home > design > Custom CSS
@media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } }  

Adding the following CSS should put you in a good spot:
/* Mobile nav styles */ @media (max-width: 799px){ /* Make the sub menu and container that contains the icons spaced apart into a column */ .header--menu-open .header-menu .header-menu-nav-list { display: flex; flex-direction: column; justify-content: space-between; } /* Override default properties to bring the sub menu into view */ .header-menu-nav-folder { position: relative; transform: translateX(0); min-height: auto; } /* Reduce the font size and adjust the space between the lines */ .header-menu-nav-folder a { font-size: 2.1rem; line-height: 1; } /* Override the default `position` and `min-height` properties of the main menu container that also contains the icons and place it below the sub menu using the `order` property. */ .header-menu-nav-folder[data-folder="root"] { position: relative; min-height: auto; order: 2; } /* Hide the container of the main menu */ .header-menu-nav-folder[data-folder="root"] .header-menu-nav-folder-content { display: none; } /* Hide the back button */ .header-menu-controls-control[data-action="back"] { display: none; } } See article on how to add CSS: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript

Add to Design > Custom CSS
[data-section-id="6116a420f53199026132b96f"] li { border: 3px solid red; }  

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
 

Ok,  so SS does not make this easy so here's the solution:
After uploading your .svg file as a link, you will get the dynamic path:
/s/image.svg Note that this dynamic version WILL NOT WORK:
background-image: url("/s/image.svg");

Paste this after your url:
https://exampledomain.com/s/image.svg This will redirect to a very long file path.
Copy that new url and use it in your custom CSS as the path:
background-image: url("https://static1.squarespace.com/static/60cbad31bb9e2415f759b216/t/60d1116d41b3160fdcad630f/1624314221425/image.svg"); You should be able to use this version as well, but keep in mind if your url changes or is in beta:
background-image: url("https://exampledomain.com/s/image.svg"); Really. All of this for a common file type like .svg 🙄

change image url to #top

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.)

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.

You can use CSS pseudo to insert FontAwesome Unicode icon. If you share link to your site, we can help easier

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
 

I will update code in this week ❣️

Yes. But perhaps next month, temporarily overloaded.

No.
As I understand it there are 3 ways to include SVG.
As code within a page via a code block or code injection.
Via a url that references a file such as <img src="my.svg" />.
Via a url that references a file such as above but the SVG is encoded in the tag itself.
I would only use the last method if the other two couldn't be used. There do seem to be some potential ins and outs with this method. Although the following article is older some of the issues may still apply.
Probably Don’t Base64 SVG