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

Question

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

:

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

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

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

Есть ли способ сделать значок менее тяжелым? Документы говорят «Anything you can do with CSS font styles, you can do with Font Awesome», но я не могу понять, как это сделать.

Answer 1

2018 Update

шрифт Высокий 5 теперь имеет свет, регулярные и твердые варианты. Значок показан в этом вопросе имеет следующий стиль при различных вариантах:

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

Документация Font Awesome's How To Use охватывает способы использования этих вариантов.

---

Оригинал ответа

Шрифт Высокий использует Private Use region of Unicode. Например, это .icon-remove вы используете добавляется в использовании ::before псевдо-селектор, установив его содержимое в \ f00d ():

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

Шрифт Высокий делает только приходят с одним шрифтом веса вариант, однако браузеры сделает это, поскольку они будут отображать любой шрифт только с одним вариантом. Если вы внимательно присмотритесь, шрифт normal не такой смелый, как размер шрифта bold. К сожалению, нормальный вес шрифта - это не то, что вам нужно.

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

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

Вот JSFiddle example и here является еще одним доказательством того, что это, безусловно, шрифт.

Answer 2

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

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

Он имеет как ИОС и андроид версии для иконок.

Answer 3

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

Answer 4

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

-webkit-text-stroke: 2px white; 

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

Answer 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; 
} 

Это не работает, то есть < 10, но, по крайней мере, это не ограничивается веб-браузерами.