Подскажите почему не работает цвет у иконок

HTML

<div class="footer__social">
                    <a href="#" class="footer__social-item">
                        <!-- <img src="icons/social/fb.svg" alt="facebook"> -->
                        <span class="icon-fb"></span>
                    </a>
                    <a href="#" class="footer__social-item">
                        <!-- <img src="icons/social/inst.svg" alt="instagram"> -->
                        <span class="icon-inst"></span>
                    </a>
                    <a href="#" class="footer__social-item">
                        <!-- <img src="icons/social/pint.svg" alt="pinterest"> -->
                        <span class="icon-pint"></span>
                    </a>
                </div>

SCSS

&__social-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border: 2px solid #fff;
        border-radius: 100%;
        text-decoration: none;
        &:nth-child(2) {
            margin: 0 30px;
        }
        span {
            font-size: 27px;
            text-align: center;
            display: flex;
            width: 50px;
            height: 50px;
            text-align: center;
            align-items: center;
            justify-content: center;
            &:hover {
                color: #000;
                text-align: center;
                font-size: 30px;
            }
        }
    }
    &__social {
        display: flex;
        justify-content: center;
        align-items: center;
    }

Иконки не меняют цвет. Загружал их через IcoMoon скачивал шрифты локально. Даже если хочу цвет в span изменить ничего не происходит

&:hover {
    color: #000;
    text-align: center;
    font-size: 30px;
}