Форумы портала PHP.SU :: Версия для печати

1. 3d_killer - 24 Января, 2017 - 23:03:20 - перейти к сообщению

Не могу решить вопрос, хочу сделать список с иконками (контакты почта и тд), вроде чтото получилось, но если строка длинная соответственно переходит на следующую строку и начинается без отступа как первая, то есть текст проходит под иконкой, что хотелось бы убрать. В скрине показано чего хочу добиться, ну и код

CODE (html):
скопировать код в буфер обмена

 
<ul id="BottomInfo">
                        <li>
                        <span class="glyphicon glyphicon-earphone"></span>
                        <a><?=View::ReturnBlock("Address","html");?></a>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-envelope"></span>
                        <a href="mailto:<?=View::ReturnBlock("Email","html");?>"><?=View::ReturnBlock("Email","html");?></a>
                    </li>
                    <li>
                        <span class="glyphicon glyphicon-map-marker"></span>
                        <a href="<?=View::ReturnBlock("PhoneTop","html");?>">
                                                        <?=View::ReturnBlock("PhoneTop","title");?>
                        </a>
                    </li>
                </ul>
 

CODE (html):
скопировать код в буфер обмена

 
#BottomInfo{margin-top: 7px;padding: 5px 0;}
#BottomInfo li{ display:block; margin-bottom: 10px; position:relative;}
#BottomInfo li span{ color:#00a1e6; font-size:1.1em;}
#BottomInfo li a{ color:#FFFFFF;font-size:1.1em;line-height:17px;}
 
#BottomInfo li p::before{ padding-left:10px; display:inline-block;}
#BottomInfo li p{ padding-left:10px; display:inline-block;}
 

Но если происходит переход на следующую строку, то эта строка упорно лезет пол иконку (без отступа слева)