如何在页眉添加带图标和文字的自定义按钮？解决二者互斥问题

嘿，这个坑我之前踩过！很多时候我们用按钮组件（不管是原生还是UI框架的），默认如果只指定了图标参数，文字就会被自动隐藏，但其实只要调整一下写法，完全可以实现图标+文字共存的效果。下面分两种常见场景给你解决方案：

一、原生HTML/CSS实现 #

直接在按钮标签内部同时放置图标元素（svg、i标签都可以）和文字，再用CSS做简单布局就行，完全可控：

<!-- 页眉区域的按钮 -->
<header class="page-header">
  <button class="header-action-btn">
    <!-- 图标用svg示例，也可以用font-awesome的<i>标签 -->
    <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>
    <span class="btn-text">回到主页</span>
  </button>
</header>

对应的CSS样式，让图标和文字横向居中对齐：

.page-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.header-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 图标和文字之间的间距，可按需调整 */
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  background-color: #165DFF;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.btn-icon {
  width: 18px;
  height: 18px;
}

二、UI框架组件实现（以Vue/React常用框架为例） #

如果是用Element Plus、Ant Design这类UI库，别只依赖组件的icon属性，直接把图标和文字都放在按钮标签内部即可，大部分框架都支持这种写法：

Element Plus（Vue） #

<header>
  <el-button type="primary">
    <el-icon><Home /></el-icon>
    <span>首页</span>
  </el-button>
</header>

⚠️ 注意：如果之前设置了icon-only属性，一定要删掉，这个属性会强制隐藏文字。

Ant Design（React） #

import { Button, HomeOutlined } from 'antd';

function PageHeader() {
  return (
    <header style={{ padding: '16px', borderBottom: '1px solid #eee' }}>
      <Button type="primary">
        <HomeOutlined />
        首页
      </Button>
    </header>
  );
}

核心思路总结 #

不管哪种方式，本质都是让按钮容器内部同时包含图标元素和文字元素，通过flex布局让它们横向排列，而不是用组件提供的“仅图标”或“仅文字”的单一模式。如果你的按钮是自定义封装的组件，检查一下内部逻辑是不是判断了“有图标就隐藏文字”，把这个判断去掉就行。

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