글꼴이 멋진 텍스트 그라디언트

방금 font awesome을 발견했으며이를 내 웹 사이트에서 사용하고 싶습니다.글꼴이 멋진 텍스트 그라디언트

문제는 내 글꼴을 그라디언트로 채워야한다는 것입니다.

<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>

그리고 그것은과 함께 "안녕하세요 세상을"표시 : 내가 표준 텍스트에서 작동 this code을 찾았지만, 내가 여기

최고 글꼴에서 아이콘으로 작동 할 수 없습니다 나는 시험 것입니다 그라디언트, 내가 원하는 아이콘을 누른 다음 아무 것도 ...

아무도 몰라?

감사합니다.

출처

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이 작동하지 않습니다 위에 링크 때문에 "FontAw가 들어있는 링크 된 CSS 파일 esome "-icons가 이동했습니다. bootstrapcdn.com-hosted FontAwesome v4.0.3 버전과 업데이트 된 FontAwesome-icon 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

글꼴이 멋진 텍스트 그라디언트

답변

관련 문제