如何設計Font Awesome圖標的圖標顏色，大小和陰影

357

鑑於他們」再簡單的字體，那麼你應該能夠他們的風格的字體：

#elementID { 
    color: #fff; 
    text-shadow: 1px 1px 1px #ccc; 
    font-size: 1.5em; 
}

來源

2012-09-04 22:50:45

+2

您可以在http://css-tricks.com/examples/IconFont/ – Sonson123

+4

@大衛托馬斯的例子測試：這是一個很好的解決方案。感謝您發佈該信息。然而，我仍然困惑爲什麼font-awesome有時顯示白色圖標，有時顯示黑色圖標。什麼是技巧？正如GirlCanCode2指出的那樣，FA網站上的例子顯示黑白圖標和文字。。。檢查Firebug中的元素，然而，特定圖標（例如圖標信息）的CSS會被寫成白色。那真的是我們必須做的嗎？在bootstrap.css中沒有圖標白色選項？ – Ace

+0

用於改變顏色，在SO中檢查[this]（http://stackoverflow.com/questions/14474452/can-i-change-the-color-of-font-awesomes-icon-color?lq=1）希望可以幫助別人 – stom

37

貌似FontAwesome圖標顏色響應文本的信息，文本錯誤等

<div style="font-size: 44px;"> 
    <i class="icon-umbrella icon-large text-error"></i> 
</div>

來源

2012-09-27 01:41:52 user1695595

+6

For Bootstrap， – Mastro

+0

這可能是本頁上的最佳答案，至少對我來說，因爲我已經在使用Bootstrap，並且適合於這種範式。 –

+0

文字錯誤不起作用，除非你有引導 –

98

你也可以添加樣式內嵌：

<i class="icon-ok-sign" style="color:green"></i> 

<i class="icon-warning-sign" style="color:red"></i>

來源

2013-03-11 19:03:20 dandrews

+4

儘管優秀的倒票，這個答案工作得很好。由於字體真棒是一種字體，它會響應影響文本的樣式和類。 – AaronLS

+4

@AaronLS你是對的，答案在技術上是正確的，我沒有投票它的原因。在我看來，倒票應該要求解釋性評論。做出投票的人可能會這樣做，因爲內聯樣式屬性通常不被認爲是最佳實踐，應儘可能地避免。那真的不是精英主義者。 CSS文件的要點是讓你的標記免受硬編碼風格的影響。 –

+12

@NightOwl使用縮小，捆綁和緩存這些資源也是最佳做法。這裏沒有任何答案能夠證明任何這些事情，並且在一個孤立答案的背景下嘗試和實施最佳做法是精英IMO。任何瞭解CSS的人都應該能夠採用這種風格並將其轉化爲CSS類。 – AaronLS

2

信用：Can I change the color of Font Awesome's icon color?

（這個答案對答案建立）

（爲書籤圖標，例如:)

inyour.css file：

.icon-bookmark.icon-white { 
    color: white; 
}

inyour.html文件：

<div class="icon-bookmark icon-white"></div>

來源

2013-07-04 13:54:57 therobyouknow

8

http://fortawesome.github.io/Font-Awesome/examples/

<i class="icon-thumbs-up icon-3x main-color"></i>

在這裏，我已經定義在我的CSS全局樣式，其中主色是一類，在我的情況下，它是一個淡藍色的色調。我發現在帶有Font Awesome的圖標上使用內聯樣式效果很好，尤其是在您爲顏色命名語義的情況下，即導航顏色，如果您想要單獨的顏色等。

在此示例中的網站上以及如何我已經寫在我的例子中，同樣，字體真棒的最新版本已經改變的語法略有調整size.Before它曾經是：

icon-xxlarge

在那裏，現在我必須使用：

icon-3x

當然，這一切都取決於什麼版本Font Awesome已經安裝在您的環境中。希望這可以幫助。

來源

2013-07-09 13:25:19 kinghenry14

4

當我試圖直接從BootstrapCDN（最簡單的方法）使用圖標時，我遇到了同樣的問題。然後，我下載了CSS文件，並將其複製到我的網站的CSS文件夾中（這在「簡單的方式」中以字體很棒的文檔描述），並且一切都開始按照他們應該的方式工作。

來源

2013-07-26 02:21:14 Thanushka

17

inyour.css文件：

*.icon-white {color: white} 
    *.icon-silver {color: silver}

inyour。html文件：

<a><i class="icon-book icon-white"></i> Book</a> 
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>

來源

2013-09-12 16:47:31 gingin

7

在FontAwesome 4.0中，類更改爲'fa-2x'，'fa-3x'。

來源

2013-12-16 18:59:44 angelokh

62

如果您正在使用引導的同時，你可以使用：

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

否則：

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

來源

2014-10-21 18:05:45

+7

加入'text-success'的作品 –

+0

這個問題的解決方案當然不涉及使用引導程序 –

+0

它可能不需要引導程序，但這就是我發現這個問題的方式。謝謝Elgs！ –

8

使用FA 4.4.0添加

.text-danger 
    color: #d9534f

到文檔css然後使用

<i class="fa fa-ban text-danger"></i>

將顏色更改爲紅色。你可以設置你自己的任何顏色。

來源

2015-09-12 22:33:57

2

裹在P或跨度的我的標籤，那麼你可以使用引導CSS類

<p class="text-success"><i class="fa fa-check"></i></p>

來源

2016-04-19 03:06:09 etlds

0

動態改變.fa-XXX圖標的CSS屬性：

<li class="nws"> 
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a> 
</li> 
<script> 
    $(document).ready(function(){ 
    $('li.nws').on("focusin", function(){ 
    $('.fa-bolt').addClass('lightning'); 
    }); 
}); 
</script> 

<style> 
.lightning{ /*do something cool like shutter*/} 
</style>

來源

2016-08-29 05:02:26 yardpenalty

5

請參閱鏈接 http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i> 
<i class="fa fa-car" style="font-size:48px;"></i> 
<i class="fa fa-car" style="font-size:60px;color:red;"></i> 

<i class="fa fa-car fa-lg"></i> 
<i class="fa fa-car fa-2x"></i> 
<i class="fa fa-car fa-3x"></i> 
<i class="fa fa-car fa-4x"></i> 
<i class="fa fa-car fa-5x"></i>

來源

2016-10-28 06:50:34

6

只要你可以定義一個類你的CSS文件，並串聯成HTML文件中像

<i class="fa fa-plus fa-lg green"></i>

現在在CSS

.green{ color:green}

來源

2017-01-10 06:33:12 gdmanandamohon

0

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

來源

2017-03-13 18:55:30

3

有一個非常簡單的方法來改變字體真棒圖標的顏色寫下來。

<!-- Font Awesome insert code --> 
 
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script> 
 
<!-- End --> 
 
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i> 
 
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i> 
 
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i> 
 
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i> 
 
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

您可以十六進制代碼更改您的偏好。注意：除非i標籤中有style="color:#00cc6a"，文字顏色也會更改圖標顏色。

來源

2017-04-16 05:11:44

0

正如已經指出的那樣，字體真棒圖標是文本，因此您可以使用相應的CSS屬性對其進行設置。例如：

.fa-twitter-square { 
    font-size: 15px; 
    color: red; 
}

如果，因爲它發生了不少對我來說，圖標的大小並沒有改變，增加了字體大小屬性「重要！」。

.fa-twitter-square { 
    font-size: 15px !important; 
    color: red; 
}

來源

2017-08-09 17:20:08 gmartinss

0

我不會建議你使用像fa-5x等內置的字體真棒樣式;因爲害怕他們可能會改變它，你將不得不繼續糾纏你的應用程序代碼以滿足最新的標準。你只需給你想要統一樣式同一類中的每個字體真棒級避免這種情況說：

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i> 
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i> 
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

這裏類是FA-薩比 - 社會 - 圖標

然後在你的CSS你可以在使用相同的css規則設置字體的樣式，您可以使用正常的字體。如

.fa-sabi-social-icons { 
color: //your color; 
font-size: // your font-size in px, em or %; 
text-shadow: 2px 2px #FF0000;

}

這應該讓你的字體真棒字體風格

來源

2017-12-11 16:37:46

1

就在離目標字體 - 真棒預定義的類名

：

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa { 
    color: red; 
    font-size: 30px; 
}

來源

2018-02-02 16:41:31 tonkihonks13

如何設計Font Awesome圖標的圖標顏色，大小和陰影

回答

相關問題