web-dev-qa-db-ja.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;
     }
htmlcsstwitter-bootstrapfont-awesome
20
Daniel

申し訳ありませんが、標準を使用してそれを行うことはできません（プロジェクトで重要でない場合は、Kiryl Plyの提案を使用できます）。 Font-Awesomeには、フォントウェイトバリアントが1つだけ付属しています。その問題を解決する新しいプロジェクトがあります（まだ準備ができていません）：

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

もう少し薄いアスペクトのライブラリを探すには、Googleの「アイコンフォント」を試してください。

8
kurroman

Webkitで次の方法で修正できます。

-webkit-text-stroke: 1px background-color;
25
Kiryl Plyashkevich

これで試してください

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

これは古い質問であることは知っていますが、2つのフォントの素晴らしいアイコンを重ねるときに、より細い円を望んでいる人の助けになることを願っています。これに出くわす前に多くの時間とエネルギーを費やしました 記事 これは正しい方向に私を助けました。私の解決策：

<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