fontawesome 아이콘 근처에서 텍스트를 어떻게 배치 할 수 있습니까?

Question

나는 멋진 글꼴로 짹짹 목록을 가지고 있습니다. 스크린 샷과 같이 아이콘 근처에 텍스트를 배치하는 방법은 무엇입니까?

스크린 샷 :

나는 아래의 HTML을 사용하는 경우, 나는 아이콘 아래 텍스트를 가지고있다.

<ul class="tweets-list text-left"> 
         <li> 
          <div class="icon"> 
           <i class="fa fa-twitter" aria-hidden="true"></i> 
          </div> 
          <div class="text"> 
           <p>Check Out Dtbaker's @Arduino Sales Notification #System 
            http://t.co/ WBFKIWHJ</p> 
           <span>3 days ago</span> 
          </div> 
         </li> 
        </ul> 

Answer 1

벨리알이 너무 UR 아이콘, 텍스트와 정확한 수평으로 정렬됩니다 필요하지 않은 경우 여기에는 UL 및 리를 제거 할 수 있습니다, 귀하의 요구 사항을 수행하는 간단한 방법입니다. 내가 테이블을 사용하고 싶지 않다면 다른 해결책을 찾는다.

<table> 
<tr> 
    <ul class="tweets-list text-left"> 
    <li> 
     <td> 
     <div class="icon"> 
      <i class="fa fa-twitter" aria-hidden="true"></i> 
     </div> 
     </td> 
     <td> 
     <div class="text"> 
      <p>Check Out Dtbaker's @Arduino Sales Notification #System 
      http://t.co/ WBFKIWHJ</p> 
      <span>3 days ago</span> 
     </div> 
     </td> 
    </li> 
    </ul> 
</tr> 
</table> 

편집 12/31

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row justify-content-md-center"> 
 
    <div class="col"> 
 
     <div class="icon"> 
 
     <img width="50" src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Twitter-icon.png"/> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-auto"> 
 
     <div class="text"> 
 
     <p>Check Out Dtbaker's @Arduino Sales Notification #System 
 
      http://t.co/ WBFKIWHJ</p> 
 
     <span>3 days ago</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

jsfiddle :: 당신이 그럴 각 행과 하나의 TD 같은 이미지와 테이블을 사용 해달라고 이유 https://jsfiddle.net/ufy6t9kd/