List Slideshow - How to customize arrows?

Site URL: https://lion-clover.squarespace.com

Hi guys,

I am using the slideshow of List section. I am trying to:

1. change the  currently  "-->"  and "<--"   arrows to   ">" and "<"

2. Adjust the size of the button on which the arrows are, and the size of the arrows (make them smaller).

https://lion-clover.squarespace.com

password: 123qwe

I appreciate your help, thanks so much!

Anyone could help me? thank you so much!

Add to Design > Custom CSS

/* left arrow */
.desktop-arrows.arrow-container.arrow-container--left button:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
    color: black;
    transform: rotate(
90deg
) !important;
    display: block;
}
.desktop-arrows.arrow-container.arrow-container--left svg {
    display: none;
}
/* right arrow */
.desktop-arrows.arrow-container.arrow-container--right button:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
    color: black;
    transform: rotate(
270deg
) !important;
    display: block;
}
.desktop-arrows.arrow-container.arrow-container--right button svg {
    display: none;
}

@tuanphan Thanks so much! 

See below the screenshots, is it possible to make the arrows thinner ( as thin as the second screenshot)? I appreciate your help!

19 hours ago, Sunrise666 said:

@tuanphan Thanks so much! 

See below the screenshots, is it possible to make the arrows thinner ( as thin as the second screenshot)? I appreciate your help!

You mean e003 icon in below link?

https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

Password: abc