web-dev-qa-db-ja.com

FontAwesomeアイコンのフォントウェイトを変更しますか？

FontAwesomeアイコンの1つをもう少し軽くしたいと思います-私が使用しているフォントよりもずっと重いです。これは現在どのように見えるか：

heavy remove icon, next to lightweight font：

Glyいですよね？そこで、次のようにフォントの太さをリセットしようとしました。

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

属性はCSSで正しく設定されているように見えますが、効果はありません。アイコンは以前と同じように重く見えます。 font-weight: lighterと-webkit-text-stroke-width: 1pxも試してみましたが、効果はありません。

アイコンの重さを減らす方法はありますか？ドキュメントには、「 CSSフォントスタイルでできること、Font Awesomeでできること 」と書かれていますが、これを行う方法がわかりません。

csstwitter-bootstrapfont-awesome
69
Richard

2018アップデート

Font Awesome 5は、light、regular、およびsolidバリアントを備えています。この質問で取り上げられているアイコンには、さまざまなバリエーションの下で次のスタイルがあります。

fa-times variants

この質問に対する現代的な答えは、アイコンのさまざまなバリエーションを使用して、アイコンを太くしたり明るくしたりできることです。唯一の欠点は、すでにsolidを使用している場合、ここで元の回答に戻ってそれらを太字にする必要があることです。同様にlightそれらを軽くするには同じことをしなければなりません。

Font Awesomeの 使用方法 ドキュメントでは、これらのバリアントの使用方法を説明しています。

元の回答

Font Awesomeは nicodeのプライベート使用領域 を使用します。たとえば、使用しているこの.icon-removeは、::before疑似セレクターを使用して追加され、そのコンテンツを\ f00d（）に設定します。

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

Font Awesomeにはフォントウェイトバリアントが1つしか付属していませんが、ブラウザは1つのバリアントのみでフォントをレンダリングするため、これをレンダリングします。よく見ると、normalフォントの太さはboldフォントの太さほど太くありません。残念ながら、通常のフォントの太さはあなたが望んでいるものではありません。

ただし、できることは、色をより暗い色に変更し、フォントサイズを小さくして、目立たないようにすることです。あなたの画像から、「タグ」テキストはアイコンよりもはるかに明るく見えるので、次のようなものを使用することをお勧めします。

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

ここに JSFiddleの例 があり、 here はこれが間違いなくフォントであることのさらなる証拠です。

51
James Donnelly

Webkitブラウザーは、フォントに「ストローク」を追加する機能をサポートしています。このちょっとしたスタイルは、フォントをより薄く見せます（白い背景を想定しています）：

-webkit-text-stroke: 2px white;

ここでcodepenの例： http://codepen.io/mackdoyle/pen/yrgEH 一部の人々は、クロスプラットフォームの「ストローク」ソリューションにSVGを使用しています： http：// codepen。 io/CrocoDillon/pen/dGIsK

90
user3303554

このページに来る人を助けるためだけに。これは、他のアイコンライブラリを柔軟に使用できる場合の代替手段です。

ジェームズは、フォントの太さを変更できないことは正しいですが、アイコンのよりモダンな外観を探している場合は、 ionicons

アイコンにはiosとAndroidの両方のバージョンがあります。

27
Abhi

著者は、フォントライブラリに対してフリーミアムアプローチを採用しているようで、Font-Awesomeライブラリに異なる重みを与えるために Black Tie を提供しています。

7
Matthew Steeples

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では動作しませんが、少なくともWebkitブラウザーに制限されていません。

5
MBrizzle