Changing Hamburger Menu in Mobile to Down Arrows

I am hoping to be able to figure out how to change the standard hamburger menu in the navigation to arrows - or something that signifies a drop down to show the menu. I found the following code that would change the hamburger to "menu" but I would prefer a down arrow something that is visually appealing but also will be helpful to visitors to tell them it is a drop down.

.burger-box:after {
    content: "Menu";
    width: 60px;
    height: 30px;
    display: block;
    color: white;
    font-size: 20px;
    visibility: visible;
}
.burger-box div {
    display: none;
}

Thank you!

Try this code, if it doesn't work, please share site url, we can check easier

.burger-box:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    display: block;
    color: #000;
    font-size: 40px;
    visibility: visible;
}
.burger-box div {
    display: none;
}