글꼴 awesom 아이콘 맞춤

동일한 높이를 갖도록 줄에 세 개의 fa 아이콘을 놓으려고합니다. 문제는 글꼴 크기 속성을 통해 수동으로 크기를 설정하더라도 모양이 정렬되지 않는다는 것입니다 (그러나 글꼴 크기 속성을 통해 11px가되어야합니다). 나는 꽤 많은 시간 동안 그들의 위치를 바꾸려고 노력했다.글꼴 awesom 아이콘 맞춤

.trash { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.upload { 
 
    position: relative; 
 
    font-size: 11px; 
 
} 
 
.download { 
 
    position: relative; 
 
    top: 1px; 
 
    font-size: 11px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-download download"></i> 
 
<i class="fa fa-upload upload"></i> 
 
<i class="fa fa-trash trash"></i>

분명히

는, 그들은 정렬되지 않은 : 그리고 결과 것입니다. 그것들을 더 "평탄하게"만들 수 있습니까? 나는 비슷한 질문이 이미 제기 된 것을 알고 있지만, 그들은 정말로 나를 도와주지 않습니다.

출처

2016-09-28 makar

상단 : 1px 다운로드를 설정 한 후에 아이콘이 정렬되어 있다고 생각합니다. 나는 [https://jsfiddle.net/tjbaezid/bu0ufmse/2/]에 대한 회선을 설정했습니다 –

오프셋이 caracter 자체에 있습니다. 다른 것과 같은 높이로 설계되지 않은 각 caracter를 구체적으로 타겟팅해야합니다. –

모든 caracters는 동일한 기준선을 가지지 않으므로 각각 개별적으로 플레이해야합니다. 내 예에서는 빨간색 테두리로 표시됩니다. 이것이 내가 할 수있는 최선의 방법이며, 정렬을 확인하기 위해 font-size을 30px로 설정했습니다. 조정에 대한

.icons { 
 
    font-size: 30px; 
 
    } 
 

 
.fa { 
 
    border-top: 1px red solid; 
 
    border-bottom: 1px red solid; 
 
} 
 

 
.download { 
 
    position: relative; 
 
    top: 0.07em; 
 
} 
 
.download:before { 
 
    font-size: 1.06em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="icons"> 
 
    <i class="fa fa-download fa-4x download"></i> 
 
    <i class="fa fa-upload fa-4x upload"></i> 
 
    <i class="fa fa-trash fa-4x trash"></i> 
 
</div>

사용 상대 폰트 크기 (em 유닛)과 폰트 크기가 무엇이든지 동일한 것이다.

출처

2016-09-28 13:56:46

기준선 문제를 지적하기위한 명성이 있지만 모든 아이콘이 똑같이 생성되는 것은 아닙니다! – lharby

가장 쉬운 방법은 그들에게 모든 고정 폭과 중앙 텍스트 정렬 제공하는 것입니다 :

.fa { 
    text-align: center; 
    width: 16px; 
}

는 당연히 당신이 당신이 원하는 방식으로보고 얻을 수있는 폭 놀러해야합니다 당신의 원하는 글꼴 크기.

Modified JSFiddle demo.

전 :

Before

후 : 당신이 시도 할 수

After

출처

2016-09-28 12:04:17

사실 OP는 같은 너비가 아닌 동일한 높이 **를 원합니다 ... –

@AlFoçceѫ 아이콘은 OP의 예에서 같은 높이입니다. http://i.imgur.com/iua2FCf.png –

각 글꼴 caracter는 다른 높이와 동일한 basemine을 갖지 않습니다. 예제를 확대하거나 (또는 글꼴 크기를 늘리면) 분명합니다. 내 대답을보고 당신이 이해할 수 있습니다 ... –

ul li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    border-radius: 100%; 
 
    margin: 0 11px; 
 
} 
 
i { 
 
    padding-top: 20%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul> 
 
    <li><i class="fa fa-download"></i> 
 
    </li> 
 
    <li><i class="fa fa-upload"></i> 
 
    </li> 
 
    <li><i class="fa fa-trash"></i> 
 
    </li> 
 
</ul>

출처

2016-09-28 12:11:37

'fa-4x' 클래스를 아이콘에 추가하면 문제가 해결되지 않는다는 것을 알 수 있습니다. –

당신은 아이콘에 대한 클래스에

vertical-align: middle;

를 사용하려고 했습니까?

출처

2016-09-28 14:04:54 bermudaa

글꼴 awesom 아이콘 맞춤

답변

관련 문제