在 Bootstrap 4 中更改导航栏列表项目符号答案

【问题标题】：Change navbar list bullet in Bootstrap 4在 Bootstrap 4 中更改导航栏列表项目符号
【发布时间】：2017-11-28 19:26:30
【问题描述】：

我将如何修改 CSS 以删除我为导航栏 Bootstrap 4/Jhipster 的每个项目菜单获得的项目符号？现在既有项目符号又有图片<i class="fa fa-home" aria-hidden="true"></i>，我想删除项目符号。这是代码sn-p：

<nav>
    <div class="jh-logo-container float-left">
        <a class="jh-navbar-toggler d-lg-none float-right" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleNavbar()">
            <!--<i class="fa fa-bars"></i>-->
        </a>
    </div>
    <div id="navbarResponsive" [ngSwitch]="isAuthenticated()">
        <ul>
             <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
                    <span>
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span jhiTranslate="global.menu.home">Home</span>
                    </span>
                </a>
            </li>
            ...
        </ul>
    </div>
</nav>

【问题讨论】：

你的意思是list-style: none; 还是ul？
是的，我愿意。 Bootsrap 4 的确切语法是：
从这里找到解决方案：stackoverflow.com/questions/1027354/…

标签： css navbar bootstrap-4

【解决方案1】：

对于 Font Awesome，您应该使用其内置的方式来处理带有图标的列表。

例子：

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

查看docs 了解更多信息。

【讨论】：