Изменить шрифт-вес значков FontAwesome?

Я хотел бы сделать один из значков FontAwesome немного менее тяжелым - он намного тяжелее шрифта, который я использую. Это выглядит так:

Уродливый, не так ли? Поэтому я попытался сбросить вес шрифта следующим образом:

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

Атрибут, как представляется, правильно установлен в CSS, но он не имеет никакого эффекта - значок выглядит так же тяжело, как и раньше. Я также пробовал font-weight: lighter и -webkit-text-stroke-width: 1px без эффекта.

Есть ли способ сделать значок менее тяжелым? В документах говорится: " Все, что вы можете сделать с стилями CSS-шрифтов, вы можете сделать с Font Awesome", но я не могу понять, как это сделать,

Ответ 1

Обновление 2018 года

Font Awesome 5 теперь имеет легкий, обычный и солидный варианты. Значок, представленный в этом вопросе, имеет следующие стили под различными вариантами:

Современным ответом на этот вопрос было бы то, что различные варианты значка могут использоваться, чтобы значок казался смелее или светлее. Единственным недостатком является то, что, если вы уже используете твердое тело, вам придется вернуться к первоначальным ответам здесь, чтобы сделать их более смелыми, и аналогично, если вы используете свет, вам придется сделать то же самое, чтобы сделать их легче.

Как использовать Документация по Font Awesome рассказывает, как использовать эти варианты.

Оригинальный ответ

Font Awesome использует регион частного использования Юникода. Например, этот .icon-remove, который вы используете, добавляется при использовании псевдоселектора ::before, устанавливая его содержимое в \f00d ():

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

Font Awesome поставляется только с одним вариантом font-weight, однако браузеры отображают его так же, как и любой другой шрифт только с одним вариантом. Если вы внимательно посмотрите, шрифт normal не такой жирный, как шрифт bold. К сожалению, нормальный вес шрифта не тот, который вам нужен.

Однако вы можете изменить его цвет на менее темный и уменьшить размер шрифта, чтобы он немного выделялся. На вашем изображении текст "тегов" выглядит намного светлее, чем значок, поэтому я бы предложил использовать что-то вроде:

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

Вот пример JSFiddle, а здесь - еще одно доказательство того, что это определенно шрифт.

Ответ 2

Webkit-браузеры поддерживают возможность добавления "штриха" к шрифтам. Этот кусочек стиля делает шрифты более тонкими (на белом фоне):

-webkit-text-stroke: 2px white;

Пример для codepen здесь: http://codepen.io/mackdoyle/pen/yrgEH Некоторые люди используют SVG для кросс-платформенного решения "удар": http://codepen.io/CrocoDillon/pen/dGIsK

Ответ 3

Просто чтобы помочь кому-либо прийти на эту страницу. Это альтернативный вариант, если вы гибки в использовании другой библиотеки значков.

Джеймс прав, что вы не можете изменить размер шрифта, однако, если вы ищете более современный вид значков, вы можете подумать о ionicons

У него есть версии ios и android для значков.

Ответ 4

Автор, похоже, применил подход freemium к библиотеке шрифтов и обеспечивает Black Tie, чтобы дать разные веса в библиотеке Font-Awesome.

Ответ 5

Другим решением, которое я использовал для создания более легких шрифтовых значков, похожих на подход webkit-text-stroke, но более портативных, является установка цвета значка так же, как и фона (или прозрачного), и использование текстовой тени для создать контур:

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

Он не работает в ie < 10, но по крайней мере он не ограничен веб-браузерами.

Ответ 6

.star-light::after {
    content: "\f005";
    font-family: "FontAwesome";
    font-size: 3.2rem;
    color: #fff;
    font-weight: 900;
    background-color: red;
}