부트 스트랩 사이드 바의 아이콘 옆에있는 텍스트 정렬

Question

dashboard을 부트 스트랩에서 수정하려고합니다. this과 비슷한 사이드 바에있는 텍스트 앞에 아이콘을 추가했습니다. 후자를 조사했지만 텍스트에 공간과 정렬이 일정한 수의 특수 CSS 코드가없는 것은 아닙니다.

이

내 코드입니다 :

<ul class="nav nav-pills flex-column"> 
    <li class="nav-item"> 
     <a class="nav-link" href="/"> 
      <div> 
       <i id="icon-dashboard" class="fa fa-tachometer icon" aria-hidden="true"></i> 
       <span class="nav-link-text">Dashboard</span> <span class="sr-only">(current)</span> 
      </div> 
     </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/books"> 
      <div> 
       <i id="icon-book" class="fa fa-book icon" aria-hidden="true"></i> 
       <span class="nav-link-text">Book</span> 
      </div> 
     </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/transactions"> 
      <div> 
       <i id="icon-transaction" class="fa fa-handshake-o icon" aria-hidden="true"></i> 
       <span class="nav-link-text">Transaction</span> 
      </div> 
     </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/reports">         
      <div></div> 
      <div> 
       <i id="icon-report" class="fa fa-bar-chart icon" aria-hidden="true"></i> 
       <span class="nav-link-text">Report</span> 
      </div> 
     </a> 
    </li> 
</ul> 

나를 알아내는 데 도움이 바랍니다. 나는 그것을하는 방법을 전혀 모른다. 감사.

Answer 1

제공된 아이콘은 해당 목록 항목 전체에 걸쳐 균일 한 레이아웃을 위해 고정 폭을 적용합니다. 다양한 너비의 아이콘이 중첩되어있을 수도 있습니다.

목록 항목의 아이콘에 fa-fw 클래스를 선언하여 고정 폭 아이콘을 사용하는 것이 좋습니다.

아이콘을 고정 폭으로 설정하려면 fa-fw를 사용하십시오. 다른 아이콘 너비가 정렬을 벗어날 때 사용하면 좋습니다. 특히 nav 과 같은 것들에 유용한 것은 &리스트 그룹을 나열합니다.

Font Awesome Examples - Fixed Width Icons

코드 조각 데모 :

.list-group { 
 
    margin: 20px; 
 
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> 
 
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="list-group"> 
 
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a> 
 
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a> 
 
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a> 
 
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a> 
 
</div>