Como aplico a configuração de um 'text-indent: -9999px' para uma imagem ao invés de texto?

Estou montando um menu mobile e quero chamar no css com o 'background: url()' outra imagem para substituir a tag IMG do meu html.

Apliquei as configs abaixo que vi por ai mas não funcionou. Eis meu HTML e CSS:

HTML:

<header class="menu">
        <nav class="nav-menu">
            <img src="https://logosmarcas.net/wp-content/uploads/2020/04/Twitter-Logo.png" class="logo-menu bt-menu-abrir">
            <div class="btSair"></div>
            <ul>
                <li class="item-menu"><a href="index.html" class="Links-menu">Bem vindo</a></li>
                <li class="item-menu"><a href="#Quemsomos" class="Links-menu">Quem somos</a></li>
                <li class="item-menu"><a href="#id-mensagem" class="Links-menu">Mensagens</a></li>
                <li class="item-menu"><a href="#onde-estamos" class="Links-menu">Onde estamos</a></li>
                <li class="item-menu"><a href="#contato" class="Links-menu">Contato</a></li>
            </ul>
        </nav>
    </header>

CSS:

.logo-menu{
            width: 80px;
            display: inline-block;
            background-image: url(Imagens/menu-ham-white.png);
            background-repeat: no-repeat;
            text-indent: -9999px;
            content: "";

        }
        .Links-menu, .Links-menu:visited{
            text-decoration: none;
            color: black;
        }

Gostaria de sumir com o logo do twitter e substitui-lo pela imagem do menu-hamburguer. Essa configuração irá para meu @media-Query no css.

A título de curiosidade, estou seguindo o tutorial do Marco Bruno no youtube e quero adaptar o que ele mostra para meu site que já possui esse menu no PC.

Aproveitando o post, realmente não sei se consigo omitir um trecho específico do html apenas para versões mobile. Assim, omitiria a logo, e incluiria um trecho no html mais simples apenas para a versão mobile.