Custom arrows

Site URL: https://clinardproperties.squarespace.com/

HI! 

I am currently trying to change my arrows from what comes on squarespace to a font awesome arrow. Also am hoping that the arrow can have a hover affect? Does anyone know how I can achieve this?

#1. What is access password?

#2. Screenshot 2 or 1 is FontAwesome?

If (2), I think you can use Squarespace Font Icon. SS has a similar icon. See list here: https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

pass: abc

On 3/18/2022 at 8:56 AM, tuanphan said:

#1. What is access password?

#2. Screenshot 2 or 1 is FontAwesome?

If (2), I think you can use Squarespace Font Icon. SS has a similar icon. See list here: https://tuanphan.squarespace.com/ss-ui-fonts?noredirect

pass: abc

Hi! 

password is : serenedigital

I am hoping to achieve screenshot 2 

15 hours ago, Serenedigitalstudio said:

Hi! 

password is : serenedigital

I am hoping to achieve screenshot 2 

Which page are you referring to? I don't see any elements that use screenshot 1 arrow on homepage

7 hours ago, tuanphan said:

Which page are you referring to? I don't see any elements that use screenshot 1 arrow on homepage

Sorry! its on the about page.

On 3/22/2022 at 10:03 PM, Serenedigitalstudio said:

Sorry! its on the about page.

Add to Design > Custom CSS

/* About Page - Custom List Slideshow arrows */
body#collection-61e6e709e0e4a4075b59dab7 {
svg.user-items-list-banner-slideshow__arrow-icon {
    display: none !important;
}
button.user-items-list-banner-slideshow__arrow-button--left:before {
    content: "\e000";
    display: block;
    font-family: 'squarespace-ui-font';
    font-size: 30px;
    color: white;
    opacity: 1;
}
button.user-items-list-banner-slideshow__arrow-button--right:after {
    content: "\e003";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
    color: white;
}}