Шрифт awesome icons element space имеет нежелательное перекрытие

Question

Я использую шрифт удивительные значки, и я хочу, чтобы они располагались друг над другом. Я также хочу, чтобы пользователь мог взаимодействовать с ними, нажимая на них.

Проблема в том, что элемент каждой иконки занимает больше места, чем нужно, и перекрывается. Поэтому, когда пользователь думает, что они нажимают на верхнюю, они в конечном итоге активируют прослушиватель для нижнего.

Вот HTML:

<div class="arrow-container"> 
    <i class="fa fa-sort-asc comment-vote up-vote-comment" aria-hidden="true"></i> 
    <i class="fa fa-sort-desc comment-vote down-vote-comment" aria-hidden="true"></i> 
</div> 

и CSS:

.black-arrow{ 
    color: black; 
} 

.up-vote-comment{ 
    width: 100%; 
} 
.down-vote-comment{ 
    position: relative; 
    top: -15px; 
} 

.comment-vote{ 
    font-size: 20px; 
} 

это важно для меня, что две стрелки выстраиваются точно на одной линии по горизонтали и довольно близко по вертикали, как они находятся в this скрипке.

Кто-нибудь знает, как заставить их не перекрываться в пространстве занятых элементов? Я попытался установить высоту стрелки внизу, но только что занятое пространство элемента было выше самой стрелки.

Answer 1

Если добавить высоту верхней стрелки и некоторые Z-индексы, так что верхняя стрелка стека над нижней стрелкой, вы можете добиться того, что вы хотите:

.black-arrow { 
    color: black; 
} 
.up-vote-comment { 
    width: 100%; 
    height: 12px; 
    z-index: 2; 
    overflow: hidden; 
} 
.down-vote-comment { 
    top: -13px; 
    z-index: 1; 
} 
.comment-vote { 
    font-size: 20px; 
    display: inline-block; 
    position: relative; 
} 

Updated fiddle - Я добавил консольный протоколирование к щелчку стрелки, так что вы можете увидеть, один нажат

Answer 2

Вы можете использовать следующий код: EDIT

.comment-vote { 
     font-size: 20px; 
     position: initial; 
     width: 100%; 
     display: inline-block; 
    } 

    .arrow-container { 
     width: 30px; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 

Таким образом, вы можете использовать класс .arrow-контейнера для размещения стрелки.

Answer 3

Сочетание контейнеров и абсолютного позиционирования. У вас может быть даже 2px пробел между стрелками.

.comment-icon-wrapper { 
    height: 10px; 
    width: 12px; 
    overflow: hidden; 
    position: relative; 
    margin-bottom: 2px; 
} 
.comment-vote { 
    position: absolute; 
    display: block; 
} 
.comment-vote { 
    font-size: 20px; 
    line-height: 20px; 
    display: block; 
    background-color: red; 
} 
.comment-vote:hover { 
    cursor:pointer; 
} 
.down-vote-comment { 
    position: relative; 
    top: -9px; 
    background-color: blue; 
} 

https://jsfiddle.net/w6ybL3nb/5/ (фоны для выделения пространства)