Hola @beatrizseller y @albertolab10,
El problema con los iconos de Font Awesome es que, al ser un <i> con una clase fa-check, fa-exclamation, etc., tienen sus propios estilos. Si quieres reemplazarlo por un punto generado por CSS, lo mejor es ocultar el icono original y luego añadir el pseudo-elemento ::before al propio contenedor o al texto.
La clave está en que el <i> ya está ahí. Podemos ocultarlo y luego añadir nuestro propio 'punto' con ::before al span o al .product-availability mismo. Aquí te dejo una versión mejorada para tu custom.css que oculta el icono original y añade un punto circular con el color correspondiente al estado:
.product-quantities .product-availability {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.9em;
margin-top: 10px;
position: relative; /* Necesario para posicionar el punto */
padding-left: 20px; /* Espacio para el punto */
}
Explicación de los cambios:
position: relative; y padding-left: 20px; en .product-availability: Esto permite que el pseudo-elemento ::before se posicione de forma absoluta dentro de él y deja espacio para el punto.display: none; en .product-quantities .product-availability i: Oculta el icono <i> existente, así no estorba.- Nuevo bloque
::before: Crea un círculo (8x8px, border-radius: 50%) que se posiciona absolutamente a la izquierda del texto, centrado verticalmente.
- Colores del
::before: Se asigna un background-color específico para el punto en cada estado (.available, .warning, .unavailable) para que coincida con el color del texto y el tono del fondo.
Con esto deberías tener un control total sobre el punto sin conflictos con los iconos de Font Awesome.