When I upload the generated Icomoon zip file, the plugin is modifying the generated styles.css file, replacing the path to the font files and breaking the styles. All I see in the Icon Picker and on the page are square boxes.

styles.css file in Zip file before uploading:

@font-face {
  font-family: 'xxx-icon-font';
  src:  url('./xxx-icon-font.eot?2ocodt');
  src:  url('./xxx-icon-font.eot?2ocodt#iefix') format('embedded-opentype'),
    url('./xxx-icon-font.ttf?2ocodt') format('truetype'),
    url('./xxx-icon-font.woff?2ocodt') format('woff'),
    url('./xxx-icon-font.svg?2ocodt#conduent-icon-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

styles.css file in the uploads/simple-iconfonts folder after uploading:

@font-face {
  font-family: 'xxx-xxx-icon-font-font';
  src:  url('./xxx-xxx-icon-font-font.eot?2ocodt');
  src:  url('./xxx-xxx-icon-font-font.eot?2ocodt#iefix') format('embedded-opentype'),
    url('./xxx-xxx-icon-font-font.ttf?2ocodt') format('truetype'),
    url('./xxx-xxx-icon-font-font.woff?2ocodt') format('woff'),
    url('./xxx-xxx-icon-font-font.svg?2ocodt#conduent-icon-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

Note that the first and last part of the font file name are being duplicated in the file. That’s causing the resource calls to the font files to 404, so we are not able to see the icons in the picker or on the page. Only square boxes.

I have been able to make it work by manually fixing the paths in the styles.css in the uploads folder on my local machine, removing only the duplicated parts of the file names. But a better solution would be not to have to manually fix the path at all. I’d like to be able to use this on a client project, but need the icon font to work after uploading.

I’ve confirmed the modified path is the only part of the plugin that isn’t working properly.

How do I download icons from icomoon ?