如何在Primefaces组件中使用"材质图标"图标

Question

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

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

图标面

Primefaces Sapphire模板显示了一个转换选项，正在进行调整，我想知道如何做到这一点。

Answer 1

从Saphire的来源来看，你需要使用这样的CSS，它覆盖ui-icon等。

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

声明字体：

@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: ""; }