我正在尝试修改 Bootstrap 的 仪表盘。我在侧边栏的文本前添加了图标,类似于 这个。我检查了后者,但它没有特殊的 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>
请帮我解决问题。我完全不知道该怎么做。谢谢。