웹킷 텍스트 - 스트로크 나는 현재 내 글꼴 멋진 아이콘 보이게하기 위해 웹킷 - 텍스트 스트로크를 사용하고

Question

모바일

작동하지 얇은

CSS

.arrow:after { font-family: $font-awesome; content:'\f054'; -webkit-text-stroke: 3px white; float: right; } 

내가 그것을 볼 때 그것은 완벽하게 작동 내 노트북 ​​(크롬을 사용하고 있습니다). 그러나 모바일에서 내 웹 사이트 (iPhone, Chrome 사용)를 볼 때 webkit-text-stroke CSS 속성이 적용되지 않는 것 같습니다. 아이콘은 여전히 ​​기본 두께 (스트로크 없음)에 있습니다. 어떤 해결책? 또는 아이콘을 더 얇게 만드는 대신 휴대 전화에서도 사용할 수있는 대안이 될 수 있습니까?

Answer 1

": after"를 사용하는 대신 표시된대로 클래스를 사용하면 효과가 있습니다.

.fa-arrow-right { 
-webkit-text-stroke: 1px orange; 
}