Tengo una pregunta sobre como poner un list-style:;
con ::before
.
Me refiero a cambiar el circulo de una lista desordenada por un icono diferente con ::before
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadTengo una pregunta sobre como poner un list-style:;
con ::before
.
Me refiero a cambiar el circulo de una lista desordenada por un icono diferente con ::before
Puedes usar la propiedad list-style que tiene CSS sin utilizar before para personalizar el icono:
<ul style="list-style-type: square">
<ul style="list-style-type: disc">
<ul style="list-style-type: circle">
o si necesitas un icono personalizado utiliza una imagen como icono con list-style-image
:
ul {
list-style-image: url("imagenes/icono.png");
}
Aqui más información: Listas personalizadas
usando FontAwesome utilizando content
y su valor unicode:
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f01c"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
<li>Item</li>
<li>Item</li>
</ul>
ul {
list-style: none;
}
li::before {
display: inline-block;
content: '×';
margin-right: 0.5rem;
}
li {
text-indent: -0.75em;
}
<ul>
<li>Texto corto</li>
<li>texto largo para probar el salto de línea, lorem ipsum dolor sit</li>
<li>Otra línea</li>
</ul>
La solución fue la siguiente:
footer .enlaces .contenedor .lista ul li::before {
display: inline-block;
content: '\f054';
font-family: 'FontAwesome';
color: #0f0f19;
margin-right: 5px;
}