Change navbar list bullet in Bootstrap 4

Question

How would I go about modifying the CSS to delete the bullet I got for every item menu of the navbar Bootstrap 4/Jhipster? Now there's both the bullet and the picture <i class="fa fa-home" aria-hidden="true"></i> and I want to delete the bullet. This is the code snippet:

<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>

Yes, I do. The exact syntax for Bootsrap 4 is:
. Thanks for the tip. — fairlie, Nov 27 '17 at 16:23
Find a solution from here : https://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets — fairlie, Nov 27 '17 at 16:27

score 0 · Answer 1 · answered Nov 27 '17 at 17:17

For Font Awesome you should use its built in way to do lists with icons.

Example:

<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>

Check the docs for more info.

Change navbar list bullet in Bootstrap 4

1 Answers1