Dear ImGui如何创建同时带有图标和文字的按钮？

ImGui 原生没有直接提供同时渲染图标和文字的按钮接口，但可以通过自定义组合逻辑快速实现，以下是两种落地性最高的方案：

方案1：使用字体图标拼接文字（最常用，适配性最强） #

这种方案不需要额外处理图片资源，直接把图标字体和默认字体合并加载即可：

• 首先将FontAwesome等图标字体和ImGui默认的字体合并加载，示例加载代码：

ImGuiIO& io = ImGui::GetIO();
// 加载默认字体
io.Fonts->AddFontFromFileTTF("Roboto-Regular.ttf", 16.0f);
// 合并加载FontAwesome图标字体，指定图标范围
static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_FA, 0 };
ImFontConfig icons_config;
icons_config.MergeMode = true;
icons_config.PixelSnapH = true;
io.Fonts->AddFontFromFileTTF("fa-solid-900.ttf", 16.0f, &icons_config, icons_ranges);

• 调用按钮接口时直接拼接图标宏和文字即可：

if (ImGui::Button(ICON_FA_COPY " 复制内容")) {
    // 按钮点击逻辑
}

注：需要提前引入FontAwesome对应的图标宏定义头文件，图标和文字之间可以加空格调整间距

方案2：图片+文字组合自定义按钮 #

如果需要使用自定义的图片图标，就可以手动组合控件实现：

// 先加载图标纹理，tex_id是你上传到GPU的纹理ID，icon_size是图标尺寸
ImTextureID tex_id = 你的图标纹理ID;
ImVec2 icon_size(20, 20);
// 计算按钮整体尺寸
ImVec2 button_size(icon_size.x + ImGui::CalcTextSize(" 保存").x + ImGui::GetStyle().FramePadding.x * 2, icon_size.y + ImGui::GetStyle().FramePadding.y * 2);

if (ImGui::InvisibleButton("custom_save_btn", button_size)) {
    // 按钮点击逻辑
}
// 按钮hover/激活状态绘制背景
if (ImGui::IsItemHovered() || ImGui::IsItemActive()) {
    ImU32 bg_col = ImGui::IsItemActive() ? ImGui::GetColorU32(ImGuiCol_ButtonActive) : ImGui::GetColorU32(ImGuiCol_ButtonHovered);
    ImGui::GetWindowDrawList()->AddRectFilled(ImGui::GetItemRectMin(), ImGui::GetItemRectMax(), bg_col, ImGui::GetStyle().FrameRounding);
}
// 绘制图标和文字
ImGui::SetCursorPos(ImVec2(ImGui::GetItemRectMin().x + ImGui::GetStyle().FramePadding.x, ImGui::GetItemRectMin().y + ImGui::GetStyle().FramePadding.y));
ImGui::Image(tex_id, icon_size);
ImGui::SameLine();
ImGui::Text(" 保存");

这个方案可以完全自定义图标、文字的间距和样式，适配特殊的设计需求。

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