文字漸變字體真棒

我剛剛發現font awesome，我想在我的網站中使用它。文字漸變字體真棒

問題是，我想讓我的字體上色漸變。我發現this code，關於標準的文字作品，但我不能讓它從字體真棒

這裏一個圖標的工作是我測試：

<style> 
    .big-icon { 
     font-size: 72px; 
     background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
    } 
</style> 

<span class="big-icon"> 
    Hello world 
</span> 
<i class="icon-beaker"></i> 
<span class="big-icon"> 
    <i class="icon-beaker"></i> 
</span>

而且它顯示一個「Hello World」與一個漸變，我想要的圖標，然後什麼都沒有...

任何人有什麼想法？

謝謝

來源

2012-10-04 Gael Du Plessix

你真棒字體鏈接無法正常工作。對於那些還不熟悉的人來說，這很難幫助。 – KRyan

對不起，我修好了。 –

爲什麼你有兩個跨度= class =「big-icon」？它不會在一個跨度內工作嗎？ –

給了我一個快速的拍攝;實現重要的是，字體真棒通過'before' pseudo-element增加了實際的圖標：

[class^="icon-"]::before, 
[class*=" icon-"]::before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

.icon-beaker:before { 
    content: "\f0c3"; 
}

要應用漸變效果的圖標，你必須針對僞元素，其包含的圖標 - 見this jsFiddle爲工作演示基於代碼：

.big-icon:before { 
    font-size: 72px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    display: initial; /* reset Font Awesome's display:inline-block */ 
}

編輯：的的jsfiddle上面鏈接不能按預期了，因爲鏈接的CSS文件包含「FontAw esome「-icons已經移動;使用FontAwesome v4.0.3的bootstrapcdn.com-hosted版本和更新的FontAwesome圖標CSS類名稱的工作版本可在http://jsfiddle.net/HGxMu/55/

來源

2012-10-05 23:19:06

+11

任何人都找到了一種方法讓它跨瀏覽器工作？ – webkit

直接在圖標上應用樣式。

.fa-gradient { 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); 
 
\t -webkit-background-clip: text; 
 
\t -webkit-text-fill-color: transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-3x fa-wrench fa-gradient"></i>

來源

2017-01-02 23:26:42

文字漸變字體真棒

回答

相關問題