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

47

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

Изображение 8207:

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

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

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

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

  • 3
    TL; DR: нет, ты не можешь.
  • 1
    Вы можете использовать content: "×"; с шрифтом Вердана, например
Теги:
font-awesome

5 ответов

38
Лучший ответ

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

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

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

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

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

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

Поделиться
  • 3
    @JamesDonnelly не только решает эту проблему, но и предлагает решение, напрямую направленное на конечное намерение пользователя. Спасибо за отличный ответ!
  • 0
    так что другими словами нужно платить за иконку про;)
49

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

-webkit-text-stroke: 2px white;

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

Поделиться
  • 1
    действительно умное решение :)
  • 0
    Изумительное решение!
Показать ещё 5 комментариев
24

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

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

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

Поделиться
  • 4
    Вопрос о FontAwesome, а не об иониках
  • 21
    Да, я знаю - это альтернатива, если у кого-то есть гибкость.
7

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

Поделиться
1

Другим решением, которое я использовал для создания более легких шрифтовых значков, похожих на подход 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, но по крайней мере он не ограничен веб-браузерами.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню