Как поставить иконку рядом с текстом так чтобы новая строка не заходила под иконку?

Question

[elo-dev]

HTML код на фото:

CSS код на фото:


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

Comments

[Владимир Коротенко]

https://jsfiddle.net/vkorotenko/9tpnyjh7/41/

Answer 1

[zkrvndm]

Иконку позиционируйте абсолютно относительно строки, самой строке дайте отступ слева равный ширине иконки.

Comments

[elo-dev]

А как это сделать,ведь иконка является псевдоэлементом класса,который присвоен строке,наверно если двигать строку,то и иконка будет смещаться

[zkrvndm]

Не будет, если отступ у строки задан через padding и при этом она сама relative.

[elo-dev]

Идет смещение вместе с иконкой

[zkrvndm]

elo-dev, протестировал на одном из своих сайтов, у меня все нормально: Снимок.PNG
Конкретно у вас же не заданы top и left у изображения. Должно быть примерно так:

p.im {
    font-weight: bold;
    position: relative;
    padding-left: 20px;
}

p.im:before {
    content: "\f041";
    font-family: FontAwesome;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

[Шохрух Шаймардонов]

Самый простой способ, сделать высоту иконки (либо его обертки) 100% от высоты родителя.
Я бы вовсе иконку вывел как псевдокласс (в данном случае before), т.к. она всего лишь декорация для красоты

Answer 3

[Lord_Dantes]

Сделайте отступ слева и иконку псевдо-элементом.