Instagram의 그라디언트 FontAwesome 5의 SVG

Question

FontAwesome 5로 업그레이드 한 후 FontAwesome의 svg를 색칠 할 수 없습니다. ⠀⠀⠀⠀⠀https://codepen.io/immad-hamid/pen/jVNvQO : 그것은 여기처럼 일 경우 ⠀⠀⠀⠀⠀https://codepen.io/shadrix/pen/GygdZr

이 멋진해야합니다 (참고 : 그는 FontAwesome 4 사용)

이 내 예입니다.

Answer 1

아이콘은 글꼴의 글리프로 더 이상 참조되지 않지만 인라인 SVG로 삽입됩니다. 아이콘의 내용 색상은 fill="currentColor"으로 정의됩니다.

배경을 설정하고 -webkit-background-clip을 사용하는 기술은 더 이상 작동하지 않습니다. 대신 color 속성을 직접 설정할 수 있습니다. 아쉽게도 color은 그라디언트를 지원하지 않기 때문에 약간의 문제가 발생합니다. 당신이 SVG 그라디언트 정의를 사용하는 경우, 대신 fill을 설정할 수 있습니다

body{ 
 
    background: black; 
 
} 
 
div { 
 
    display:flex; 
 
    justify-content:center; 
 
    font-size:50px; 
 
    color: white; 
 
} 
 

 
div:hover svg * { 
 
    fill: url(#rg); 
 
}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> 
 
<svg width="0" height="0"> 
 
    <radialGradient id="rg" r="150%" cx="30%" cy="107%"> 
 
    <stop stop-color="#fdf497" offset="0" /> 
 
    <stop stop-color="#fdf497" offset="0.05" /> 
 
    <stop stop-color="#fd5949" offset="0.45" /> 
 
    <stop stop-color="#d6249f" offset="0.6" /> 
 
    <stop stop-color="#285AEB" offset="0.9" /> 
 
    </radialGradient> 
 
</svg> 
 
<div> 
 
<i class="fab fa-instagram" aria-hidden="true"></i> 
 
</div>

그라데이션에 대한 r 속성은 CSS에서와 같은 용어로 표현 할 수 없습니다, 그래서 그것은 약간의 견적을 여기에.

선택자 div:hover svg *에 유의하십시오. 그것으로 요소의 속성을 덮어 씁니다. 스타일을 상속 받으면 스타일 요소를 직접 참조해야합니다 (fill="currentColor").