Major Add a new link
Add a picto
icons are not displayed
save , go to preview,
icons ** is missing too
[CMS-12294] Choose a pictogram : material icons are missing
CssFontHelper get an array of CSS class names with same "content" rule
From FontAwesome CSS it returns for example 
"cssClassNames": [
"fas fa-football",
"fas fa-football-ball"
]
From IntranetIcon.css it returns for example
"cssClassNames": [
"intraneticon-agenda",
"decorator-intraneticon-agenda"
]
From Material Icon css it returns for example 
"cssClassNames": [
"material-icons",
"material-icons g_translate"
]
All items of the array of class names are supposed to be enought to display the glyph, so in ChooseGlyph widget, only the first class of the array is used
new Ext.XTemplate( '<tpl for=".">', '<div class="data-view-glyph-icon">', '<div class="glyph-icon-class {[values.cssClassNames[0]]}" title="{[values.cssClassNames.join(\'\\n\')]}"></div>', '</div>', '</tpl>' )
Sol 1: Use values.cssClassNamesAsString in XTemplate in widget
Sol 2: Fix CssFontHelper to be able to handle CSS such as material icons. It should returns a array of one item only "material-icons g_translate"
CSS of material icon:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
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';
}
.material-icons.3d_rotation:before {
content: "\e84d";
}
Laurence Aumeunier
added a comment - - edited CssFontHelper get an array of CSS class names with same "content" rule
From FontAwesome CSS it returns for example
"cssClassNames": [
"fas fa-football",
"fas fa-football-ball"
]
From IntranetIcon.css it returns for example
"cssClassNames": [
"intraneticon-agenda",
"decorator-intraneticon-agenda"
]
From Material Icon css it returns for example
"cssClassNames": [
"material-icons",
"material-icons g_translate"
]
All items of the array of class names are supposed to be enought to display the glyph, so in ChooseGlyph widget, only the first class of the array is used
new Ext.XTemplate(
'<tpl for = "." >' ,
'<div class= "data-view-glyph-icon" >' ,
'<div class= "glyph-icon-class {[values.cssClassNames[0]]}" title= "{[values.cssClassNames.join(\' \\n\ ')]}" ></div>' ,
'</div>' ,
'</tpl>'
)
Sol 1: Use values.cssClassNamesAsString in XTemplate in widget
Sol 2: Fix CssFontHelper to be able to handle CSS such as material icons. It should returns a array of one item only "material-icons g_translate"
CSS of material icon:
.material-icons {
font-family : 'Material Icons' ;
font-weight : normal;
font-style : normal;
font-size : 24px; /* Preferred icon size */
display : inline-block;
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' ;
}
.material-icons.3d_rotation:before {
content : "\e84d" ;
}
On material icons, class is missing (class name only present on title attribute)
<div class="glyph-icon-class material-icons" title="material-icons material-icons access_alarm"></div>
Laurence Aumeunier
added a comment - - edited On material icons, class is missing (class name only present on title attribute)
<div class= "glyph-icon- class material-icons" title= "material-icons material-icons access_alarm" ></div>
Sol 1 can not work...
For example for IntranetIcon we have "ametysicon-xxx" and "decorator-ametysicon-xxx" that use the same content rule but one with :before, the other with :after. So the icon will be displayed twice