更改FontAwesome圖標的字體重量？

我想提出的FontAwesome圖標少了幾分沉重 - 它比我現在用的字體要重得多。這究竟是怎麼看目前：更改FontAwesome圖標的字體重量？

heavy remove icon, next to lightweight font ：

醜陋的，對不對？所以，我已經試過如下重置字體重量：

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

屬性似乎是在CSS設置正確，但它沒有任何效果 - 的圖標看上去就像重如前。我也試過font-weight: lighter和-webkit-text-stroke-width: 1px，沒有任何效果。

有什麼辦法可以讓圖標少沉重？該文檔說「Anything you can do with CSS font styles, you can do with Font Awesome」，但我無法弄清楚如何做到這一點。

來源

2013-07-24 Richard

TL; DR：不，你不能。 – Ben

您可以使用'content：「×」;'與verdana字體例如 – Taras

2018更新

字體真棒5現在擁有光，定期和固體變種。在這個問題上功能的圖標具有以下風格下的不同的變體：

fa-times variants

現代這個問題的答案將是圖標的不同變體可用於使圖標顯得更大膽或變淺。唯一的缺點是，如果你已經在使用固體你將不得不回落到原來這裏的答案讓那些更大膽，同樣如果你使用光你必須這樣做，使那些更輕。

字體真棒的How To Use文檔走過了如何使用這些變種。

原來的答案

字體真棒利用了Private Use region of Unicode的。例如，這.icon-remove您使用的是使用::before僞選擇加入，並設置其內容爲\ f00d（）：

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

字體真棒確實只配備了一個字體重量變型，但是瀏覽器將呈現這一點，因爲它們只會渲染任何只有一個變體的字體。如果仔細觀察，normal字體重量不會像bold字體重量那樣粗體。不幸的是，正常的字體重量並不是你所追求的。

什麼，但是你可以做的是改變其顏色爲深少的東西，減少其字體大小，使其脫穎而出少一點。從你的形象，在「標籤」文本顯得比圖標輕得多，所以我建議使用類似：

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

這裏有一個JSFiddle example，並here進一步證明，這絕對是一個字體。

來源

2013-07-24 15:05:50

@JamesDonnelly不僅可以解決手頭的問題，而且還提供了直接解決用戶端點意圖的解決方案。感謝您的好評！ – ThinkBonobo

只是爲了幫助別人來到這個頁面。如果您靈活使用其他圖標庫，這是一個替代方案。

詹姆斯是正確的，如果你正在尋找更現代的外觀的圖標，那麼你可以考慮ionicons

它既有iOS和Android版本的圖標，但是你不能改變字體粗細。

來源

2015-02-10 15:30:35 Abhi

問題是關於FontAwesome而不是ionicons – Chris

+18

是的，我知道 - 如果有人具有靈活性，這是一個替代方案。 – Abhi

作者似乎採用了免費的字體庫方法，並提供Black Tie爲Font-Awesome庫提供不同的權重。

來源

2015-05-13 13:53:56

Webkit瀏覽器支持向字體添加「描邊」的功能。風格該位使字體看起來更薄（假設在白色背景）：

-webkit-text-stroke: 2px white;

例如在這裏codepen：http://codepen.io/mackdoyle/pen/yrgEH 有些人使用SVG的跨平臺的「中風」的解決方案：http://codepen.io/CrocoDillon/pen/dGIsK

來源

2016-04-30 01:14:29 user3303554

真的很聰明的解決方案:) –

驚人的解決方案！ – Hoon

這是一個了不起的解決方案，應該是被接受的答案。你當然可以改變'白色'以匹配字體在背景上的顏色，並且它完美地融合在一起。真棒解決方案。 – Andy

另一個解決方案我用來創建更輕鬆的fontawesome圖標，類似於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; 
}

它不起作用，即ie < 10，但至少它不限於webkit瀏覽器。

來源

2016-05-17 16:57:28 MBrizzle

更改FontAwesome圖標的字體重量？

回答

相關問題