it-roy-ru.com

Хотите сделать иконки-шрифты тоньше

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

мой 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;
     }
15
Daniel

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

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

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

9
kurroman

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

-webkit-text-stroke: 1px background-color;
19
Kiryl Plyaskevicz

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

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

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

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

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

0
Preben Hesvik