(Squarespace) Add an Arrow to List Simple Grid

Suppose you want to add an arrow to List Simple Grid items, like this

You can follow these steps.
#1. Use this code to Website > Website Tools > Code Injection > Header (or Page Header Code Injection). If the site doesn’t support Code Injection, you can edit page > Add a Block > Choose Code > Paste same code.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#2. Use this code to Website > Website Tools > Custom CSS

div.list-item-content__description:after {
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: 18px;
}

#3. Result.

1 Like

@Hashim_Shariff You can use code here to add arrows. I use an icon from FontAwesome. If you don’t like this arrow style, you can change to another style.

1 Like