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

Question

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

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

heavy remove icon, next to lightweight font :

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

.tag .icon-remove  { 

  font-weight: 100;

}

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

есть ли способ я может сделать значок менее тяжелым? Врачи говорят:"все, что вы можете сделать со стилями шрифтов CSS, вы можете сделать с помощью шрифта Awesome

651 5

css twitter-bootstrap font-awesome

5 ответов:

Comments

Ничего не найдено.

James Donnelly · Accepted Answer · 2018-02-08 13:52:59

обновить 2018

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

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

шрифта Как Использовать документация проходит через то, как использовать эти варианты.

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

шрифт Awesome использует частный регион использования Юникода. Например, это .icon-remove вы используете добавляется в помощью ::before псевдо-селектор, устанавливающий его содержимое на \f00d ():
.icon-remove:before {
    content: "\f00d";
}
Font Awesome поставляется только с одним вариантом веса шрифта, однако браузеры будут отображать это так же, как они будут отображать любой шрифт только с одним вариантом. Если присмотреться, то normal шрифт-вес не такой смелый как bold шрифт-вес. К сожалению, нормальный вес шрифта-это не то, что вам нужно.

однако вы можете изменить его цвет на что-то менее темное и уменьшите размер шрифта, чтобы он выделялся немного меньше. Из вашего изображения текст "теги" выглядит намного легче, чем значок, поэтому я бы предложил использовать что-то вроде:
.tag .icon-remove {
    color:#888;
    font-size:14px;
}
здесь пример JSFiddle и здесь является еще одним доказательством того, что это определенно шрифт.

user3303554 · Accepted Answer · 2016-04-30 04:14:29

браузеры Webkit поддерживают возможность добавления "штриха" к шрифтам. Этот бит стиля делает шрифты тоньше (предполагая белый фон):
-webkit-text-stroke: 2px white;
пример на codepen здесь:http://codepen.io/mackdoyle/pen/yrgEH Некоторые люди используют SVG для кросс-платформенного решения "stroke":http://codepen.io/CrocoDillon/pen/dGIsK

Abhi · Accepted Answer · 2015-02-17 00:34:33

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

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

Он имеет как ios, так и android версии для иконок.

Matthew Steeples · Accepted Answer · 2015-05-13 16:53:56

автор, похоже, принял подход freemium к библиотеке шрифтов и предоставляет Черный Галстук чтобы дать различные веса шрифта-удивительная библиотека.

MBrizzle · Accepted Answer · 2016-05-17 19:57:28

другое решение, которое я использовал для создания более легких значков fontawesome, похожих на webkit-text-stroke подход, но более портативный, заключается в том, чтобы установить цвет значка таким же, как фон (или прозрачный) и использовать text-shadow для создания контура:
.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