Font awesom icons alignment

Я пытаюсь разместить три иконки fa в строке, чтобы они имели равную высоту. Дело в том, что они не выглядят выровненными, даже если я устанавливаю их размеры вручную (через свойство font-size) (мне нужно, чтобы их было около 11 пикселей). Я тоже пытался изменить свои позиции в течение довольно длительного времени. И каков результат:Font awesom icons alignment

.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 download. Я установил строку для [https://jsfiddle.net/tjbaezid/bu0ufmse/2/] –

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

Поскольку все символы не имеют одинаковой базовой линии, вы должны играть с каждым отдельно. Красные границы в моем примере показывают это. Это лучшее, что я могу сделать, я установил 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 –

Каждый из символов шрифта не имеет одинаковой высоты и той же базовой линии, что и другие. Увеличьте свой пример (или увеличьте размер шрифта), это будет очевидно. Посмотрите на мой ответ, и вы поймете ... –

Вы можете попробовать это:

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

ответ

Смежные вопросы