CSS - выровнять значок Font Awesome с абзацем текста - PullRequest
Новая
       63

CSS - выровнять значок Font Awesome с абзацем текста

0 голосов
/ 10 февраля 2019

Я знаю, что этот вопрос задают довольно часто, но я просмотрел все доступные ответы, и ни один из них не работает для меня.

У меня здесь есть рабочий код: https://codepen.io/anon/pen/WPzGrO

Я пытаюсь выровнять значки FA рядом с абзацем текста.Таким образом, значок должен быть в середине абзаца.Когда пара разбивается на 2 или более строк, в нижней части появляется значок, как вы можете видеть в коде.

свойство vertical-align: middle; или line-heigh, похоже, здесь ничего не делает.

Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Изменить ниже код CSS Надежда будет работать. 

#menu-list p::after {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top:0;
  font-size: 30px;
  line-height:25px;
  color: #599FF8;
}
0 голосов
/ 10 февраля 2019

Удалите правила vertical-align, line-height и height и добавьте следующее: 

#menu-list p::after {
  …
  transform: translateY(-50%);
  top: 50%;   
}

enter image description here

#menu-list {
  background: #eee;
  padding: 50px 100px;
}

#menu-list p {
  position: relative;
  padding-left: 40px;
  text-align: left;
}

#menu-list p::after {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  font-size: 32px;
  color: #599FF8;  
  width: 32px;
  transform: translateY(-50%);
  top: 50%;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div id="menu-list"> 
  <p>This is the longest text that will stack into few lines</p>
  <p>This one will make 2 lines</p>
  <p>And a single line</p>
</div>
...