단락의 두 번째 줄을 첫번째 줄과 나란히 들여 쓰기 하시겠습니까?

Question

Font Awesome을 사용하여 선택자 앞에 p :에 아이콘을 추가하고 텍스트가 정렬되도록 단락의 두 번째 줄만 들여 쓰기 할 수 있는지 궁금합니다.

<div class="result> 
    <p class='fa location'>{{ address }}<br/>{{ citystate }}</p> 
</div> 

: 여기

내 코드입니다 :

그리고 여기에 내가 달성하기 위해 노력하고 무엇 : 여기

내 전류 출력 모습입니다

그리고 여기 내 CSS는 :

.result .location:before { 
    content: "\f041"; 
    padding-right:6px; 
    color:#b3b3b3; 
} 

그대로 유지할 수 있습니까? 또는이 효과를 얻기 위해 코드를 재구성해야합니까?

Answer 1

전체 단락을 오른쪽으로 채운 다음 글꼴 위젯 아이콘을 왼쪽으로 당겨 작성한 공간을 채 웁니다.

.result { 
    padding-left: 30px; 
} 

.result .location:before { 
    content: "\f041"; 
    color:#b3b3b3; 
    margin-left: -10px; 
    padding-right: 2px; 
} 

jsfiddle

Answer 2

당신은 <br /> 후 일부  에 추가하고이 같은 코드 모양을 만들 수있는 무엇 :

<div class="result> 
    <p class='fa location'>{{ address }}<br/>&nbsp;&nbsp;{{ citystate }}</p> 
</div> 

가있는  를 추가 그것은 당신으로까지 이상 이동 될 때까지 필요해.

도움이 되었기를 바랍니다.