如何为HTML图标栏（Icon Bar）中的图标添加文字？

我帮你调整了代码，既添加了图标对应的文字，还优化了布局让整体更协调，同时保留了你原有的时钟功能和响应式设置：

<body onload="startTime()">
  <div id="txt"></div>
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    body {margin: 0;}
    .icon-bar {
      width: 100%;
      background-color: #555;
      /* 改用flex布局让图标项自动均分宽度，适配不同数量的图标 */
      display: flex;
    }
    .icon-bar a {
      flex: 1;
      text-align: center;
      padding: 12px 8px;
      transition: all .3s ease;
      color: #fff;
      font-size: 36px;
      /* 让图标和文字垂直排列，视觉更清晰 */
      display: flex;
      flex-direction: column;
      text-decoration: none; /* 去掉链接默认下划线 */
    }
    .icon-bar a:hover {
      background-color: #000;
    }
    /* 单独控制文字样式，避免和图标大小冲突 */
    .icon-bar a span {
      font-size: 14px;
      margin-top: 6px;
      font-family: sans-serif;
    }
    /* 给时钟添加基础样式（可选） */
    #txt {
      padding: 10px;
      text-align: center;
      font-size: 18px;
    }
  </style>

  <div class="icon-bar">
    <a href="#"><i class="fa fa-home"></i><span>首页</span></a>
    <a href="#"><i class="fa fa-search"></i><span>搜索</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>邮件</span></a>
    <a href="#"><i class="fa fa-globe"></i><span>发现</span></a>
    <a href="#"><i class="fa fa-user"></i><span>我的</span></a>
  </div>

  <script>
    function startTime() {
      const today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
      setTimeout(startTime, 1000);
    }
    function checkTime(i) {
      if (i < 10) {i = "0" + i};  // 给小于10的数字补零
      return i;
    }
  </script>
</body>

核心修改说明： #

• 文字容器：每个图标链接里新增<span>标签存放文字，方便单独调整文字样式，不影响图标尺寸。
• 布局优化：把.icon-bar改为flex布局，用flex:1让每个链接自动平分宽度，后续增减图标时不用手动修改宽度值。
• 垂直排列：给.icon-bar a设置flex-direction:column，让图标在上、文字在下，符合移动端常见的底部导航样式。
• 细节调整：增加左右padding给文字留出空间，设置文字的字体大小和间距，同时去掉链接下划线提升美观度。

如果想要图标和文字横向排列，只需要修改.icon-bar a的flex方向即可：

.icon-bar a {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  transition: all .3s ease;
  color: #fff;
  font-size: 36px;
  display: flex;
  flex-direction: row; /* 切换为横向排列 */
  align-items: center; /* 图标和文字垂直居中对齐 */
  justify-content: center; /* 水平居中 */
  gap: 8px; /* 图标和文字之间的间距 */
  text-decoration: none;
}

内容的提问来源于stack exchange，提问作者Farmer Joe