Tengo problemas al tratar de darle un espacio a un elemento HTML
que se encuentra dentro de un menú.
Lo que quiero hacer es darle un margen de 10px a la derecha y 10px a la izquierda a un icono dentro, pero no logro llegarle al elemento o no se aplican los cambios.
menú lateral izquierdo:
.left-navbar {
height: 100vh;
background-color: $bgcolor;
ul {
list-style-type: none;
text-align: left;
padding: 10px;
li {
opacity: 0.8;
margin: 0px;
i {
margin: 0px;
padding: 0px;
}
}
}
}
.space-i {
margin-right: 10px;
margin-left: 10px;
}
<div class="grid-menu">
<div class="left-navbar">
<div>
<img src="https://via.placeholder.com/60" alt="" srcset="" />
</div>
<div class="full-name">
<p>Ing. Maria G</p>
</div>
<div class="">
<button>Link 1</button>
<button>Link 2</button>
</div>
<ul>
<li>
<a href="" class="link"><i class="fas fa-users space-i">Employees</i></a>
</li>
</div>
</div>
Creé una clase CSS
llamada "space-i" la cual aplico a la clase del icono pero esta no se ve afectada, Por qué?
<a href="" class="link"><i class="fas fa-users space-i">Employees</i></a>
El icono se ve pegado al texto "employee" de izquierda a derecha, y es lo que quiero evitar.
<a href="" class="link"><i class="fas fa-users space-i"></i> Employees</a>
La palabraEmployees
fuera del html del icono.