Estoy implementando el botón de voto a favor usando fa fa signs y estaba tratando de colorear el fondo del up vote button pero el color se muestra fuera del sign (que creo que es el relleno del ícono), y estoy tratando de ocultar el relleno exterior. por lo que el color solo estará dentro del signo de voto a favor
<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" /> <i class="fal voteup fa-sort-up fa-4x"></i> .voteup { background-color : red; } <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" /> <i class="fal voteup fa-sort-up fa-4x"></i> También lo intenté agregando padding: none; pero sigue mostrándose.
Cualquier ayuda sería muy apreciada.
Si desea mantener el contorno negro, puede usar dos íconos (sólido + regular) uno encima del otro:
#outline { position: absolute; z-index: 2; } #background { color: red; position: relative; z-index: 1; } <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" /> <i class="fal voteup fa-sort-up fa-4x" id="outline"></i> <i class="fas voteup fa-sort-up fa-4x" id="background"></i> Observe el orden de los elementos HTML y z-index .
Desafortunadamente, no puede hacer esto con una fuente: los archivos de fuente estándar no admiten fuentes multicolores. (Hay un nuevo formato que lo hace, pero no es ampliamente compatible y Fontawesome no está disponible de esa manera en ningún caso).
Si desea flechas que tengan un borde exterior de un color y un relleno de otro color, tendrá que usar una imagen. Un SVG probablemente sería lo mejor (porque los gráficos vectoriales se escalan) y puede descargar los símbolos de Fontawesome como archivos SVG. Luego, puede abrir las flechas en un paquete de gráficos como Inkscape y agregar su relleno personalizado.
Si solo desea una flecha sólida, puede usar la variante sólida Fontawesome. Para hacer esto, reemplace su clase fal con fas .
Puede aplicar las propiedades del carácter de icono relleno a través de CSS. Esto tiene la gran ventaja de que no requiere marcado adicional.
.voteup { position: relative; /* allow absolute positioning of children */ } .voteup:after { content: "\f0de"; /* set the character code */ font-weight: 900; /* set the character variant */ color: red; position: absolute; /* position with respect to the parent */ left: 0; z-index: -1; /* since :before is in use, we'll use this and lay it behind */ } <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" /> <i class="fal voteup fa-sort-up fa-4x"></i>