FontAwesome 아이콘의 글꼴 두께를 변경 하시겠습니까?

FontAwesome 아이콘의 글꼴 두께를 변경 하시겠습니까?

---

FontAwesome 아이콘 중 하나를 약간 덜 무겁게 만들고 싶습니다. 사용중인 글꼴보다 훨씬 무겁습니다. 현재 모습 :

:

못 생겼지? 그래서 다음과 같이 font-weight를 재설정하려고 시도했습니다.

.tag .icon-remove  { 
  font-weight: 100;
}

속성이 CSS에서 올바르게 설정된 것처럼 보이지만 효과가 없습니다. 아이콘이 이전처럼 무겁게 보입니다. 나는 또한 시도했다 font-weight: lighter및 -webkit-text-stroke-width: 1px어떤 효과.

아이콘을 덜 무겁게 만들 수있는 방법이 있습니까? 문서에는 " CSS 글꼴 스타일로 할 수있는 모든 작업, Font Awesome으로 할 수있는 작업 "이라고 나와 있지만이 작업을 수행하는 방법을 알 수 없습니다.

---

2018 업데이트

글꼴 최고 5는 이제 기능 빛 , 일반 및 고체의 변형. 이 질문에 표시된 아이콘은 다양한 변형에서 다음과 같은 스타일을가집니다.

이 질문에 대한 현대적인 대답은 아이콘의 다양한 변형을 사용하여 아이콘을 더 굵게 또는 더 밝게 표시 할 수 있다는 것입니다. 유일한 단점은 이미 solid 를 사용하고 있다면 여기에서 원래의 답변으로 돌아가서 더 대담하게 만들어야하며, 마찬가지로 조명 을 사용 하는 경우에도 동일한 작업을 수행하여 더 밝게 만들어야한다는 것입니다.

Font Awesome의 How To Use 문서는 이러한 변형을 사용하는 방법을 안내합니다.

---

원래 답변

Font Awesome은 Unicode 의 Private Use 영역을 사용 합니다. 예를 들어, .icon-remove사용중인 이것은 ::before의사 선택기 를 사용하여 추가되고 내용을 \ f00d ( ) 로 설정합니다 .

.icon-remove:before {
    content: "\f00d";
}

Font Awesome에는 글꼴 두께 변형이 하나만 제공되지만 브라우저는 변형이 하나만있는 모든 글꼴을 렌더링하므로이를 렌더링합니다. 자세히 보면 normalfont-weight는 font-weight만큼 굵지 않습니다 bold. 불행히도 정상적인 글꼴 두께는 당신이 추구하는 것과 다릅니다.

그러나 당신이 할 수있는 일은 색상을 덜 어두운 것으로 변경하고 글꼴 크기를 줄여 눈에 띄지 않게 만드는 것입니다. 이미지에서 "태그"텍스트는 아이콘보다 훨씬 밝게 표시되므로 다음과 같은 것을 사용하는 것이 좋습니다.

.tag .icon-remove {
    color:#888;
    font-size:14px;
}

여기의 JSFiddle 예 , 그리고 여기 이 확실히 글꼴 것을 추가 증거입니다.

---

Webkit 브라우저는 글꼴에 "획"을 추가하는 기능을 지원합니다. 이 스타일은 글꼴을 더 얇게 만듭니다 (배경이 흰색이라고 가정).

-webkit-text-stroke: 2px white;

codepen의 예 : http://codepen.io/mackdoyle/pen/yrgEH 일부 사람들은 크로스 플랫폼 "스트로크"솔루션을 위해 SVG를 사용하고 있습니다 : http://codepen.io/CrocoDillon/pen/dGIsK

---

이 페이지에 오는 모든 사람을 돕기 위해. 다른 아이콘 라이브러리를 사용하는 데 융통성이 있다면 대안입니다.

James는 글꼴 두께를 변경할 수 없다는 것이 맞지만 아이콘에 대한 더 현대적인 모양을 찾고 있다면 ionicons를 고려할 수 있습니다.

아이콘에 대한 iOS 및 Android 버전이 모두 있습니다.

---

저자는 글꼴 라이브러리에 freemium 접근 방식을 취한 것으로 보이며 Font-Awesome 라이브러리에 다른 가중치를 부여하기 위해 Black Tie 를 제공합니다.

---

더 가벼운 fontawesome 아이콘을 만드는 데 사용한 또 다른 해결책은 webkit-text-stroke접근 방식 과 비슷 하지만 더 이식성이 뛰어나 아이콘 의 색상을 배경과 동일 (또는 투명)으로 설정하고 텍스트 그림자를 사용하여 윤곽선을 만드는 것입니다.

.fa-outline-dark-gray {
    color: #fff;
    text-shadow: -1px -1px 0 #999,
            1px -1px 0 #999,
           -1px 1px 0 #999,
            1px 1px 0 #999;
}

ie <10에서는 작동하지 않지만 적어도 웹킷 브라우저로 제한되지는 않습니다.

참고 URL : https://stackoverflow.com/questions/17836851/change-font-weight-of-fontawesome-icons