如何在 Primefaces 组件中使用 Material Icons 图标

Question

如何在 Primefaces 组件中使用 Material Icons，示例： <p:commandButton icon="material-icons-outlined face"/> 使用前缀为 "ui-icon- 的图标属性定义。因为，在Material图标网站上，只能这样使用：

<span class="material-icons-outlined">face</span>

Icon Face

Primefaces Sapphire Template显示了一个转换选项，正在适配，我想知道怎么做。

Answer 1

通过查看 Saphire 的源代码，您需要像这样使用 CSS 来覆盖 ui-icon 等

来源：https://www.primefaces.org/sapphire/javax.faces.resource/theme.css.xhtml?ln=primefaces-sapphire-blue

声明字体：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.eot.xhtml?ln=sapphire-layout");
    /* For IE6-8 */
    src: local("Material Icons"), local("MaterialIcons-Regular"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.woff2.xhtml?ln=sapphire-layout") format("woff2"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.woff.xhtml?ln=sapphire-layout") format("woff"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.ttf.xhtml?ln=sapphire-layout") format("truetype");
}

覆盖 ui-icon

body .ui-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-indent: 0;
    overflow: visible;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

body .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

然后在主题的底部，所有 ui-图标都像这样声明...

.ui-icon-circle-triangle-e:before { content: ""; }

如何在 Primefaces 组件中使用 Material Icons 图标

How to use a Material Icons icon within a Primefaces component

jsf

primefaces

material-design