CSS Failed to Customize the dropdown arrow ▼

Question

I can't customize it, he refuses! important Did I miss something?

My Dropdown codepen

.fs-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto;
    transition: ease-in 0.15s;
}

.fs-open .fs-arrow {
    transform: rotate(-180deg);
}

With font-family: "dashicons" Failed

.fs-arrow{
    font-family: "dashicons" !important;
    content: "f347" !important;
}

with font-family:"Font Awesome 5 Free" Failed

.fs-arrow{
    font-family:"Font Awesome 5 Free" !important;
    font-weight:600 !important;
    content: "f078" !important;
}

I already have all FontAwesome included and it is displayed but in after

all that is not very pretty ..

.fs-arrow:after{
        font-family:"Font Awesome 5 Free" !important;
        font-weight:600 !important;
        content: "f078" !important;
    }

what is this horror..

EDIT :

if it helps .. i did this, it's still horrible but centered at least

they are on top of each other

.fs-default > div > span{
    color:#f86c6c;
    top:-4px;
    left:195px;
    margin-bottom:24px;
    right:auto !important;
    width:23px;
}

Answer 1

Check this out, I have done it using fontawesome:

Codepen: https://codepen.io/manaskhandelwal1/pen/poEOPRK

One of the main thing you are missing in the animation is transform-origin: center;