如何在PrimeFaces的p:commandButton中添加Flaticons自定义图标

步骤1：准备Flaticons图标资源 #

• 从Flaticons下载目标图标，优先选SVG格式（适配性更强）或官方提供的字体图标包。
• 若用SVG：下载后可直接使用，无需额外转换；若用字体包：解压后将字体文件（.woff/.woff2等）放到项目resources/fonts目录，保留配套CSS文件。

步骤2：引入资源并编写对齐样式 #

PrimeFaces原生按钮图标有固定的尺寸、间距和颜色继承规则，需通过CSS让自定义图标匹配这些规则：

情况A：使用SVG图标

1. 将SVG文件放入resources/images目录，或直接复制SVG代码到页面（inline方式更高效）。
2. 编写自定义CSS：

/* 匹配PrimeFaces原生图标尺寸与间距 */
.custom-btn-icon {
    width: 16px; /* 根据你的PrimeFaces主题调整，多数主题默认16px */
    height: 16px;
    fill: currentColor; /* 自动继承按钮文字颜色，hover状态同步变化 */
    margin-right: 4px; /* 图标与按钮文字的间距，和原生对齐 */
}

/* 纯图标按钮的样式调整 */
.ui-button-icon-only .custom-btn-icon {
    margin: 0;
}

3. 在按钮中使用：

<p:commandButton value="导出数据">
    <f:facet name="icon">
        <!-- inline SVG方式，直接粘贴Flaticons的SVG代码 -->
        <svg class="custom-btn-icon" viewBox="0 0 24 24">
            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
        </svg>
    </f:facet>
</p:commandButton>

情况B：使用字体图标

1. 引入Flaticons的字体CSS：

<h:outputStylesheet library="css" name="flaticon.css" />

2. 编写对齐CSS，覆盖PrimeFaces原生图标样式：

/* 让字体图标继承按钮的样式规则 */
.ui-button .flaticon-your-icon-class {
    font-size: 16px;
    line-height: 1;
    color: currentColor;
    margin-right: 4px;
    /* 去掉PrimeFaces原生图标默认的背景和缩进 */
    background: none;
    text-indent: 0;
}

/* 纯图标按钮调整 */
.ui-button-icon-only .flaticon-your-icon-class {
    margin: 0;
}

3. 在按钮中直接指定图标类：

<p:commandButton value="删除" icon="flaticon-trash" />

关键注意事项 #

• 查看当前PrimeFaces主题的图标样式（比如.ui-icon类的尺寸、边距），确保自定义样式完全匹配。
• 若使用SVG，务必保留正确的viewBox属性，避免图标拉伸或显示不全。
• 字体图标要确保字体文件路径在CSS中配置正确，否则会出现图标不显示的问题。

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