css - insertar - ¿Cambiar el peso de la fuente de los iconos de FontAwesome?

iconos html para web

Question

Me gustaría hacer que uno de los iconos de FontAwesome sea un poco menos pesado, es mucho más pesado que la fuente que estoy usando. Así es como se ve actualmente:

:

Feo, ¿verdad? Así que intenté restablecer el font-weight de la siguiente manera:

.tag .icon-remove  { 
  font-weight: 100;
}

El atributo parece estar configurado correctamente en el CSS, pero no tiene ningún efecto: el icono parece tan pesado como antes. También probé el font-weight: lighter y -webkit-text-stroke-width: 1px sin efecto.

¿Hay alguna manera de que pueda hacer que el ícono sea menos pesado? Los documentos dicen " Todo lo que puedes hacer con los estilos de fuente CSS, puedes hacerlo con Font Awesome ", pero no puedo encontrar la manera de hacerlo.

Answer 1

El autor parece haber tomado un enfoque freemium a la biblioteca de fuentes y proporciona Black Tie para dar diferentes pesos a la biblioteca Font-Awesome.

Answer 2

Los navegadores Webkit admiten la capacidad de agregar "trazo" a las fuentes. Este pequeño estilo hace que las fuentes parezcan más delgadas (asumiendo un fondo blanco):

-webkit-text-stroke: 2px white;

Ejemplo sobre el codepen aquí: http://codepen.io/mackdoyle/pen/yrgEH Algunas personas están usando SVG para una solución de "trazo" multiplataforma: http://codepen.io/CrocoDillon/pen/dGIsK

Answer 3

Otra solución que he usado para crear iconos fontawesome más livianos, similar al enfoque de webkit-text-stroke pero más portátil, es establecer el color del ícono al igual que el fondo (o transparente) y usar text-shadow para crear un esquema:

.fa-outline-dark-gray {
    color: #fff;
    text-shadow: -1px -1px 0 #999,
            1px -1px 0 #999,
           -1px 1px 0 #999,
            1px 1px 0 #999;
}

No funciona en ie <10, pero al menos no está restringido a navegadores webkit.

Answer 4

Solo para ayudar a cualquiera a venir a esta página. Esta es una alternativa si es flexible con el uso de alguna otra biblioteca de iconos.

James tiene razón en que no se puede cambiar el peso de la fuente; sin embargo, si buscas un aspecto más moderno para los iconos, entonces podrías considerar ionicons

Tiene versiones ios y android para iconos.

Answer 5

Actualización 2018

Font Awesome 5 ahora presenta variantes ligeras , regulares y sólidas . El ícono que aparece en esta pregunta tiene el siguiente estilo bajo las diferentes variantes:

Una respuesta moderna a esta pregunta sería que se pueden usar diferentes variantes del ícono para hacer que el ícono parezca más audaz o más claro. El único inconveniente es que si ya está utilizando sólidos , tendrá que volver a las respuestas originales aquí para hacer los más audaces, y del mismo modo si está usando la luz , tendría que hacer lo mismo para hacerlos más ligeros.

La documentación de cómo usar Font Awesome describe cómo usar estas variantes.

Respuesta original

Font Awesome hace uso de la región de uso privado de Unicode . Por ejemplo, este .icon-remove que está utilizando se agrega al usar el pseudo-selector ::before , configurando su contenido en / f00d (  ):

.icon-remove:before {
    content: "/f00d";
}

Font Awesome solo viene con una variante de font-weight, sin embargo, los navegadores lo renderizarán de la misma manera que lo harían con cualquier fuente con una sola variante. Si miras de cerca, el peso-fuente normal no es tan audaz como el bold -peso de la fuente. Lamentablemente, un peso de fuente normal no es lo que buscas.

Sin embargo, lo que puedes hacer es cambiar su color a algo menos oscuro y reducir el tamaño de la fuente para que se destaque un poco menos. A partir de su imagen, el texto "etiquetas" aparece mucho más claro que el ícono, por lo que le sugiero que use algo como:

.tag .icon-remove {
    color:#888;
    font-size:14px;
}

Aquí hay un ejemplo de JSFiddle , y here hay más pruebas de que definitivamente es una fuente.