Increase height of IcoFont - html

Question

.navbar.height {
min-height: 180px;
}
.navbar.height .nav.navbar-nav {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item a {
min-height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class="col-xl-12 col-lg-12 filter-bar">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer']" role="tab" aria-expanded="false"
ngbTooltip="Home">
<i class="icofont icofont-home"></i>
</a>
<div class="slide"></div>
</li>
<li class="nav-item" *ngIf="jwtHelperService.isRole(['globaladmin','globaladminro','franchiseadmin'])">
<a class="nav-link text-muted" href="javascript:;" (click)="custBranch1.show()" title="Create New Branch">
<i class="icofont icofont-building"></i>New
</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-light height bg-faded m-b-30">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab"
aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart icofont-4x-pie-alt text-muted"></i>
</a>
<div class="slide"></div>
</li>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab"
aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart-pie-alt text-muted"></i>
</a>
<div class="slide"></div>
</li>
</ul>
</nav>
</div>
</div>
How can I centre <li> tags in both <nav> tags and increase their IcoFont size?
I tried to add the icofont-4x class to the <i> tag, but it did not work.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="row">
<div class="col-xl-12 col-lg-12 filter-bar">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer']" role="tab" aria-expanded="false"
ngbTooltip="Home">
<i class="icofont icofont-home"></i>
</a>
<div class="slide"></div>
</li>
<li class="nav-item" *ngIf="jwtHelperService.isRole(['globaladmin','globaladminro','franchiseadmin'])">
<a class="nav-link text-muted" href="javascript:;" (click)="custBranch1.show()" title="Create New Branch">
<i class="icofont icofont-building"></i>New
</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-light height bg-faded m-b-30">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab"
aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart icofont-4x-pie-alt text-muted"></i>
</a>
<div class="slide"></div>
</li>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab"
aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart-pie-alt text-muted"></i>
</a>
<div class="slide"></div>
</li>
</ul>
</nav>
</div>
</div>
**CSS**
<style>
.navbar.height {
min-height: 180px;
}
.navbar.height .nav.navbar-nav {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item {
min-height: 80px;
}
.navbar.height .nav.navbar-nav .nav-item a {
min-height: 50px;
}
</style>

Answer 1

You can try this,
.nav-item .icofont{
font-size: 30px;
}

Answer 2

To center li elements horizontally, use justify-content-center on the nav.
To change font-size of a specific element, you need to use CSS.
.font-25px {
font-size: 25px;
}
<i class="icofont icofont-building font-25px"></i>
.font-25px {
font-size: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-12 col-lg-12 filter-bar">
<nav class="navbar navbar-light bg-faded justify-content-center font-25px">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer']" role="tab" aria-expanded="false" ngbTooltip="Home">
<i class="icofont icofont-home"></i>Home
</a>
<div class="slide"></div>
</li>
<li class="nav-item" *ngIf="jwtHelperService.isRole(['globaladmin','globaladminro','franchiseadmin'])">
<a class="nav-link text-muted" href="javascript:;" (click)="custBranch1.show()" title="Create New Branch">
<i class="icofont icofont-building"></i>New
</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-light height bg-faded m-b-30 justify-content-center font-25px">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab" aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart icofont-4x-pie-alt text-muted"></i>Price
</a>
<div class="slide"></div>
</li>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab" aria-expanded="false" ngbTooltip="Dashboard">
<i class="icofont icofont-chart-pie-alt text-muted"></i>Product
</a>
<div class="slide"></div>
</li>
</ul>
</nav>
</div>
</div>

Answer 3

To make centre li
1) Set .nav-item and .nav to display: inline- block;
2) Set .navbar to text-align: center
.nav-item, ul.nav {
display: inline-block;
}
.navbar {
text-align: center;
}
For icon size, you can increase font-size
i.icofont {
font-size: 20px; // Change as per your requirement
}