How to add an Arrow in Squarespace

I often see people need to add an arrow after a heading, button (header button, button block, form button, newsletter button), or dropdown title…so here I will share some code to add an arrow to these buttons on Squarespace.

#1. Add an arrow to the Dropdown Title

Use this code to Custom CSS box

/* dropdown arrow */
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

Result

#2. Header button arrow

Use this code to Custom CSS box

a.btn:after {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
}

Result:

#3. Button block arrow

Use this code to Custom CSS box

div.button-block a:after {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-size: 14px;
    color: #f1f;
}

Result:

#4. Newsletter Block button arrow

Use this code to Custom CSS

span.form-submit-button-label:after {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    font-size: 10px;
}

Result:

#5. Heading Arrow

Use this code to Custom CSS box. You can change h3 to h1, h2, h4, h5, h6…

h3:after {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
    float: right;
    font-size: 20px;
}

Result: