Змінити вагу шрифту піктограм FontAwesome?

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

:

Некрасиво, правда? Тому я спробував скинути значення шрифту наступним чином:

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

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

Чи можу я якось зробити піктограму менш важкою? У документах сказано: " Усе, що ви можете зробити зі стилями шрифтів CSS, ви можете зробити з Font Awesome ", але я не можу зрозуміти, як це зробити.

2018 Оновлення

Шрифт Awesome 5 тепер має легкі , звичайні та тверді варіанти. Піктограма, представлена ​​в цьому питанні, має наступний стиль для різних варіантів:

Сучасна відповідь на це запитання полягала б у тому, що різні варіанти піктограми можуть бути використані, щоб піктограма виглядала сміливішою чи світлішою. Єдиним недоліком є ​​те, що якщо ви вже використовуєте твердий, вам доведеться повернутися до початкових відповідей тут, щоб зробити їх сміливішими, а також, якщо ви використовуєте світло, вам доведеться зробити те саме, щоб зробити їх легшими.

Документація Font Awesome « Як користуватися» описує, як використовувати ці варіанти.

Оригінальна відповідь

Font Awesome використовує область приватного використання Unicode . Наприклад, це, .icon-removeщо ви використовуєте, додано за допомогою ::beforeпсевдоселектора, встановивши для його вмісту \ f00d ( ):

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

Шрифт Awesome постачається лише з одним варіантом із вагою шрифту, однак браузери відображатимуть його так, як і шрифт з одним варіантом. Якщо придивитися, normalшрифт-шрифт не такий жирний, як boldшрифт. На жаль, нормальна вага шрифту - це не те, що вам потрібно.

Проте ви можете змінити його колір на щось менш темне і зменшити розмір шрифту, щоб він трохи менше виділявся. З вашого зображення текст "тегів" виглядає набагато світлішим за піктограму, тому я пропоную використовувати щось на зразок:

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

Ось приклад JSFiddle , і ось ще один доказ того, що це точно шрифт.

Веб-браузери підтримують можливість додавання штрихів до штриху. Цей штрих стилю робить шрифти тоншими (припускаючи білий фон):

-webkit-text-stroke: 2px white;

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

Просто щоб допомогти кожному, хто заходить на цю сторінку. Це альтернативний варіант, якщо ви гнучко використовуєте іншу бібліотеку значків.

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

У ньому є і iOS, і Android-версії для піктограм.

Автор, схоже, застосував вільний підхід до бібліотеки шрифтів і надає Black Tie різні значення для бібліотеки Font-Awesome.

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

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