Adding multiple Icomoon fonts to the website - css

Question

The dev company I hired to develop a mobile website failed to include selection.json file into the folder, and never even thought to keep it locally for themselves for future reference during the support period... Basically, all they did include were the font files: TTF, EOT, SVG, and WOFF.
Here's what Icomoon says about adding more glyphs to an existing font: Each font pack you download from the IcoMoon app comes with a selection.json file which you can import back to the app in order to modify or update your font, along with the class names associated with its glyphs.
Now I need to add more glyphs to the font. It looks like the simplest approach would be to generate another font, and add it to the style.css. Could you please advise how to do that? the original lines are:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot?t9csor');
src: url('../fonts/icomoon/icomoon.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?t9csor') format('woff'), url('../fonts/icomoon/icomoon.ttf?t9csor') format('truetype'), url('../fonts/icomoon/icomoon.svg?t9csor#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
speak: none;
line-height: 1;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-family: 'icomoon';}
/* Better Font Rendering =========== */
Or, perhaps, there's another way to add icons to this font, without breaking its structure and having to revise entire CSS changing the class names throughout the website?
Thank you!

Answer 1

One option would be to find all of the icons in your current icon font and create a new font using both the current icons as well as whatever new icons you want to include. You'll then replace the current font with the new one.
Another option is to create a new font that only includes your new icons, then include that in your website along with the existing icon font. Using the icomoon app, you can customize the font name and class prefix by clicking on "Preferences". I would recommend doing this in order to avoid conflicting with the current "icomoon" font included in your website.
If you want to include both your old font and the new font, you'll then include some CSS similar to this (generated by icomoon):
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot?t9csor');
src: url('../fonts/icomoon/icomoon.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?t9csor') format('woff'), url('../fonts/icomoon/icomoon.ttf?t9csor') format('truetype'), url('../fonts/icomoon/icomoon.svg?t9csor#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ourotherfontname';
src: url('../fonts/icomoon/ourotherfontname.eot?t9csor');
src: url('../fonts/icomoon/ourotherfontname.eot?#iefixt9csor') format('embedded-opentype'), url('../fonts/icomoon/ourotherfontname.woff?t9csor') format('woff'), url('../fonts/icomoon/ourotherfontname.ttf?t9csor') format('truetype'), url('../fonts/icomoon/ourotherfontname.svg?t9csor#ourotherfontname') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="anoterclassprefix-"],
[class*="anotherclassprefix-"] {
speak: none;
line-height: 1;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-family: 'ourotherfontname';}
/* Better Font Rendering =========== */