모든 글리프의 너비가 동일한 지 어떻게 확인합니까?

모든 글리프의 너비가 동일한 지 어떻게 확인합니까?

---

동일한 글꼴 크기에서도 표준 너비가 없다는 것을 알았습니다. 단어가 들쭉날쭉하지 않도록 항목 목록 앞에 어떻게 사용할 수 있습니까?

문제의 스크린 샷 :

다음은 코드입니다.

<ul id="myTab">
    <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
    <li><a href="#video"><i class="icon-film"></i> Videos</a></li>
    <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
    <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
    <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>

---

3.1.1부터 icon-fixed-widthCSS를 편집하는 대신 클래스를 사용할 수 있습니다 .

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

4.0부터는 4.x https://fontawesome.com/v4.7.0/examples/#fixed-width 5.x https://fontawesome.com/how-to-use/on-the-web 을 사용해야합니다 fa-fw. / 스타일링 / 고정 너비 아이콘

지적 해 주신 @kalessin에게 감사드립니다.

---

이 작업을 수행하는 다른 스타일이 정의되어 있지 않은 것이 확실합니까?

Font Awesome을 사용하는 사이트의 파일에 HTML이 배치 된 모습입니다.

아이콘과 텍스트가 어떻게 정렬되는지 확인하십시오. 다음은 선이 추가 된 원본 이미지입니다.

Font Awesome 스타일을 제거하는 스타일이 어딘가에 정의되어있는 것 같습니다.

원래 Font Awesome 스타일 (에서 제공 font-awesome.css)을 추가하여 일시적으로 해결되는지 확인할 수도 있습니다.

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

---

이 CSS를 사용하는 간단하고 확장하기 쉬운 글리프 또는 아이콘

> .fa { transform: scale(1.5,1); }

---

4.X 이상의 Fontawesome 버전의 fa-fw경우 <i>태그에 클래스를 사용 하십시오 . 참고 :-https: //fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

참고 URL : https://stackoverflow.com/questions/16592849/how-do-i-make-sure-every-glyph-has-the-same-width