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


98

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

문제의 스크린 샷 :

다음은 코드입니다.

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

답변:



7

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

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

감사합니다. 내 font-awesome.css, 다운로드 한 파일 ( fortawesome.github.io/Font-Awesome/assets/font-awesome.zip ) 또는 참조하는 CDN 버전 ( bootstrapcdn.com/ index.html? v = 05162013150137 # tab_fontawesome ). 하지만 효과가있었습니다. 감사.
Jim Hohl-CTO Vidaao

2

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

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.