Tengo en el header un menú donde los usuarios se loguean o registran en la web (entorno Wordpress) haciendo click en el enlace "Entra o Regístrate". Justo a la izquierda de este texto, hay un icono de usuario de FontAwesome.
Lo que necesito ahora es que cuando la pantalla esté por debajo de 1025px de ancho, el icono de usuario se mantenga, pero el texto "Entra o Regístrate" desaparezca, de tal forma que un click en el icono, acceda al contenido de la página. Lo he intentado hacer, pero en lugar de ocultarse sólo el texto, también lo hace el icono.
¿Cómo podría ocultar sólo el texto cuando esté por debajo de 1025px?
Le indico a continuación el código que tengo relacionado con este menú de "Entra o Regístrate" registrado hasta ahora:
body {
background:#ccc;
}
.login-nav ul #menu-item-162 :before {
content: "\f2bd";
font: normal normal normal 14px/1 FontAwesome;
font-size: 1.125em;
vertical-align: middle;
padding: 0 5px;
color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="login-nav">
<ul id="menu-login" class="nolmp">
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-
object-page menu-item-162">
<a href="http://localhost/Cover/login/">Entra o Regístrate</a>
</li>
</ul>
</div>
Hay más estilos definidos, pero he pasado la línea más relevante.