如何让两个<nav>中的<li>居中并增大IcoFont图标尺寸？

一、先搞定IcoFont图标尺寸不生效的问题 #

先从几个最常见的原因排查，按顺序来：

1. 确认IcoFont样式文件已正确引入
   必须在HTML头部引入IcoFont的CSS文件，路径一定要对应你本地的文件位置。比如：

   <link rel="stylesheet" href="icofont/icofont.css"> <!-- 根据你的实际路径调整 -->
   

   如果路径错了，所有IcoFont相关的样式都不会生效，这是最容易踩的坑。

2. 图标标签要同时带基础类和尺寸类
   IcoFont的尺寸类（比如icofont-4x）不能单独用，必须配合基础的icofont类一起写。正确的写法是：

   <i class="icofont icofont-home icofont-4x"></i>
   

   把icofont-home换成你实际要用的图标类名就行，比如icofont-settings、icofont-user这类。

3. 检查有没有自定义CSS覆盖了图标尺寸
   如果你的自定义样式里给<i>标签加了font-size还带了!important，会直接盖过IcoFont的尺寸类样式。比如这种：

   i {
     font-size: 16px !important; /* 这会让icofont-4x完全失效 */
   }
   

   解决办法要么去掉!important，要么给图标加更具体的选择器来控制尺寸，或者干脆直接用IcoFont的类就好。

二、实现Nav内列表项居中 #

基于Bootstrap，给你两种简单好用的方法：

方法1：用Bootstrap内置Flex类（推荐） #

Bootstrap自带了现成的布局类，直接给导航里的<ul>加上d-flex justify-content-center，再补个w-100让<ul>占满父容器宽度，就能轻松让li水平居中了，不用额外写CSS：

<!-- 第一个导航示例 -->
<nav class="navbar navbar-light bg-light">
  <ul class="navbar-nav d-flex justify-content-center w-100">
    <li class="nav-item">
      <a class="nav-link" href="#"><i class="icofont icofont-home icofont-4x"></i></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"><i class="icofont icofont-settings icofont-4x"></i></a>
    </li>
  </ul>
</nav>

<!-- 第二个导航同理操作 -->
<nav class="navbar navbar-dark bg-dark">
  <ul class="navbar-nav d-flex justify-content-center w-100">
    <li class="nav-item">
      <a class="nav-link" href="#"><i class="icofont icofont-user icofont-4x"></i></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#"><i class="icofont icofont-mail icofont-4x"></i></a>
    </li>
  </ul>
</nav>

方法2：自定义CSS实现 #

要是你不想用Bootstrap的flex类，也可以自己写CSS：

/* 给导航的ul设置居中对齐 */
.nav-center ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* 让li横向排列 */
.nav-center li {
  display: inline-block;
  margin: 0 10px; /* 可选：给列表项加些间距 */
}

然后给<nav>加上nav-center类就行：

<nav class="nav-center navbar navbar-light bg-light">
  <ul class="navbar-nav">
    <!-- 列表项内容 -->
  </ul>
</nav>

完整可运行示例代码 #

把上面的方案整合起来，给你一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <!-- 引入IcoFont CSS（路径根据实际情况调整） -->
  <link rel="stylesheet" href="icofont/icofont.css">
  <title>Nav & Icon Demo</title>
</head>
<body>
  <!-- 第一个居中导航 -->
  <nav class="navbar navbar-light bg-light mb-3">
    <ul class="navbar-nav d-flex justify-content-center w-100">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-home icofont-4x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-settings icofont-4x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-search icofont-4x"></i></a>
      </li>
    </ul>
  </nav>

  <!-- 第二个居中导航 -->
  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav d-flex justify-content-center w-100">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-user icofont-4x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-mail icofont-4x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="icofont icofont-phone icofont-4x"></i></a>
      </li>
    </ul>
  </nav>

  <!-- 引入Bootstrap JS（可选，如需交互功能） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如果还是有问题，可以打开浏览器控制台看看网络请求，确认IcoFont的CSS有没有加载成功，或者有没有报错信息，一般都能快速定位到问题~

内容的提问来源于stack exchange，提问作者Asif Ahmed