me encuentro con un problema peculiar,
Me gustaría ocultar con display block el texto de las etiquetas a cuando la pantalla este en modo mobile.
Solamente deseo ocultar el texto de todos los elementos para que cuando este en mobile se vean solo los iconos de fontawesome.
Este es mi código:
<div class="navegacion">
<a href="#"><i class="fad fa-code link"></i> elemento 1</a>
<a href="#"><i class="fad fa-laptop-code link"></i> elemento 2</a>
<a href="#"><i class="fad fa-brackets-curly link"></i> elemento 3</a>
<a href="#"><i class="fad fa-books link"></i> elemento 4</a>
<a href="#"><i class="fad fa-video link"></i> elemento 5</a>
</div>
.navegacion{
background: #fff;
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
display: flex;
justify-content: center;
}
var aLinks = document.querySelectorAll(".navegacion a");aLinks[0];
function miFuncion(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "orange";
}
}
var x = window.matchMedia("(max-width: 768px)")
miFuncion(x) // Call listener function at run time
x.addListener(miFuncion) // Attach listener function on state changes
Gracias por tu ayuda :)