從FontAwesome改變圖標的顏色？

我使用的Bigcommerce，並有這對我的代碼：從FontAwesome改變圖標的顏色？

.icon-cart { 
    color: #4ca3c0 !important; 
} 

.icon-cart a{ 
    color: #4ca3c0 !important; 
}

，它不會改變圖標的顏色。任何幫助？

http://glymed-plus.mybigcommerce.com/

來源

2014-10-01 user3722834

的fontAwesome安裝出現混亂。

原因color CSS屬性不會改變購物車的顏色是因爲購物車是由一個精靈呈現：

.icon { 
    display: inline-block; 
    width: 16px; 
    height: 14px; 
    background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px; 
}

（該background加載圖像，而不是圖標）。

見http://fortawesome.github.io/Font-Awesome/get-started/

您可能沒有在安裝複製其他文件夾。

如果您刪除了background，請安裝其他目錄並保留您的HTML，它應該可以正常工作。

編輯：你說得對，fontAwesome正確安裝。

現在改變<i>元素：

<i class="fa fa-shopping-cart" title="View Cart">&nbsp;</i>

您可以設置大小和位置更好的顯示，但fa和fa-shopping-cart類必須用於顯示購物車圖標進行設置。

來源

2014-10-01 17:03:08 Niloct

嘿！我沒有意識到它仍然在將圖像拉過來（BigCommerce是一個可以處理的bug。）但是現在這個圖標根本沒有顯示出來。 – user3722834 2014-10-01 17:32:59

該圖標未顯示，因爲fontAwesome的安裝可能已損壞。請參閱答案中的鏈接。你必須複製字體目錄。 – Niloct 2014-10-01 17:36:06

它在搜索框的正下方顯示一個fontAwesome圖標。 – user3722834 2014-10-01 17:43:33

先刪除!important

.icon-cart { 
    color: #4ca3c0; 
} 

.icon-cart a{ 
    color: #4ca3c0; 
}

現在這裏是你如何標記看起來像

<a href="" title="View Cart"> 
    <i class="icon icon-cart" title="View Cart">&nbsp;</i> 
    <span></span> 
</a>

.icon-cart是i，也沒有孩子。

所以這是無效的：

.icon-cart a{ 
    color: #4ca3c0; 
}

來源

2014-10-01 16:39:10

這沒有奏效。 – user3722834 2014-10-01 16:43:17

你的圖標不是CSS製作的，它是一個PNG圖像，它被加載爲圖標的背景。

你不能只是「變」它的顏色，你需要用你的情況CSS Filters

調整它，你可以在<i>元素上應用轉化：

-webkit-filter: invert(100%);

從灰色變成它白色。

body { 
 
    background: black; 
 
} 
 
.icon { 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 14px; 
 
    background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px; 
 
    -webkit-filter: invert(100%); 
 
} 
 
.icon:hover { 
 
    -webkit-filter: invert(0%); 
 
}

<i class="icon icon-cart" title="View Cart" style=" 
 
    color: red; 
 
">&nbsp;</i>

來源

2014-10-01 17:04:12 Banana

從FontAwesome改變圖標的​​顏色？

回答

相關問題

從FontAwesome改變圖標的顏色？