2017-12-31 77 views
0

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

스크린 샷 : enter image description here

나는 아래의 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> 
+0

다른 텍스트로 텍스트. 그래서 그들은 올바르게 정렬합니다 – Kumar

+0

디스플레이 : 인라인/인라인 블록 또는 플로트는 어떻게됩니까? – StyleSh1t

+0

저는 flexbox를 사용하고 있습니다. '.icon'과'.text' 클래스에 대한'display : inline-block'? – Belial

답변

0

벨리알이 너무 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/

+0

도와 줘서 고맙습니다.하지만 테이블없이 만들어야합니다. – Belial

+0

@ 벨리알이 제 편집을 확인합니다. 또한 jsFiddle을 추가하고 출력을 확인하십시오. – Kumar

+0

@Belial 두 번째 div 자동 조정을 만들었습니다. 필요에 따라 수정할 수 있습니다. 이것을 확인하십시오. https://getbootstrap.com/docs/4.0/layout/grid/ – Kumar