Хотите сделать шрифт-удивительный значок тоньше

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

мой html-код

    <span class="fa-stack fa-lg fa-5x color-red">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-trophy"></i>
    </span>

мой код css

    .fa-trophy{
      font-weight:lighter;
     }

Ответ 1

Извините, это невозможно сделать с использованием стандартов (если это не важно в вашем проекте, вы можете использовать предложение Kiryl Ply). Font-Awesome поставляется с одним вариантом шрифта. Существует новый проект для решения этой проблемы (еще не готов):

https://www.kickstarter.com/projects/232193852/font-awesome-black-tie

вы можете искать другую библиотеку с более тонким аспектом, попробуйте "значок шрифта" в Google.

Ответ 2

Вы можете исправить это в webkit с помощью:

-webkit-text-stroke: 1px background-color;

Ответ 3

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

<span class="fa-stack fa-3x">
   <i class="fa fa-circle fa-stack-2x icon-circle"></i>
   <i class="fa fa-leaf fa-stack-1x"></i>
</span>

.icon-circle{
color: transparent !important;
border: 5px solid #YourColor;
border-radius: 50%;}

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

Ответ 4

попробуйте с этим

  .class-name i{
        -webkit-text-stroke: 2px white;
    }