增加图标字体的高度答案

【问题标题】：Increase height of IcoFont增加图标字体的高度
【发布时间】：2018-11-03 15:16:42
【问题描述】：

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

如何在两个<nav> 标签中居中<li> 标签并增加它们的IcoFont 大小？

我尝试将icofont-4x 类添加到<i> 标记中，但没有成功。

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>

【问题讨论】：

要增加此类图标的大小，只需使用font-size:_px;

标签： html css angular bootstrap-4

【解决方案1】：

你可以试试这个，

.nav-item .icofont{
  font-size: 30px;
}

【讨论】：

【解决方案2】：

要将li 元素水平居中，请在nav 上使用justify-content-center。

要更改特定元素的font-size，需要使用CSS。

.font-25px {
  font-size: 25px;
}

 &lt;i class="icofont icofont-building font-25px"&gt;&lt;/i&gt;

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

【讨论】：

【解决方案3】：

制作中心li

1) 将.nav-item 和.nav 设置为display: inline- block;

2) 将.navbar 设置为text-align: center

.nav-item, ul.nav {
  display: inline-block;
}
.navbar {
  text-align: center;
}

图标大小可以增加font-size

i.icofont {
  font-size: 20px; // Change as per your requirement
}

【讨论】：

是否需要改变列表的显示方式？
@mahan 是的，这是必要的
是的。我这样做是因为您可以使用引导类将 li 元素居中对齐。