Meus icones não estão aparecendo

Já revisei meus códigos,porem não consigo achar o erro, meus ícones não estão aparecendo quando carrego a pagina. segue meu codigo

HTML

<nav class="menu-lateral">
    <img src="flex-e-grid-main/assets/img/logo.svg" alt=" Logotipo HZC" class="menu-lateral__logo">
    <a href="#" class="menu-lateral__link--inicio menu-lateral__link--ativo">Inicio</a>
    <a href="#" class="menu-lateral__link--videos"> Videos</a>
    <a href="#" class="menu-lateral__link--picos">Picos</a>
    <a href="#" class="menu-lateral__link--integrantes">Integrantes</a>
    <a href="#" class="menu-lateral__link--camisas">Camisas</a>
    <a href="#" class="menu-lateral__link--pinturas">Pinturas</a>


</nav>

CSS

@font-face { font-family: 'icones'; src: url(../font/icones.ttf); }

body{ background-color: #1D232A; font-family: 'icones', sans-serif; color: white; } .cabecalho{ display: flex; justify-content: space-between; align-items: center; background-color: #15191C; padding: 8px 16px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16); } .cabecalho__menu i::before{ content: "\e904"; font-size:24px; } .cabecalho__notificacao i::before{ content: "\e906"; font-size:24px; } .cabecalho__logo{ width: 40px; }

.menu-lateral{ display: flex; flex-direction: column; background-color: #15191C; width: 75vw; height: 100vh; }

.menu-lateral__logo{ width: 110px; align-self: center; padding: 16px; } .menu-lateral__link{ height: 64px; color: #95999C; padding-left: 64px; display: flex; align-items: center;

} .menu-lateral__link--ativo { color:#FFFFFF; border-left: 8px solid #FFFFFF; }

.menu-lateral__link::before{ content: width:24px; height: 24px; font-size: 24px; position: absolute; left: 24px; }

.menu-lateral--inicio::before{ content: "\e902"; } .menu-lateral--videos::before{ content: "\e90e"; } .menu-lateral--picos::before{ content: "\e909"; } .menu-lateral--integrantes::before{ content: "\e903"; } .menu-lateral--camisas::before{ content: "\e900"; } .menu-lateral--pinturas::before{ content: "\e90a"; }