I am working on the legacy code, there is a list of iconmoon icons.
I need to add a new one: the "cross" icon
I found I icon on iconmoon
I download that icon as FONT
But how do merge it with the rest of the already existing icons?
... ICNOMON.svg file
... rest of icons,
<glyph unicode=" " glyph-name="cross" d="M465.917 207.36c-35.84 0-66.5....." />
.icon-cross:before {
content: "\\e90a";
}
unicode value is correctIf the new icon should be mapped to unicode "e90a" you need to update the glyph's unicode attribute accordingly:
Example svg font
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="878" descent="-146" />
<missing-glyph horiz-adv-x="1024" />
<!--space-->
<glyph unicode=" " horiz-adv-x="200" d="" />
<!--heart-->
<glyph unicode="" glyph-name="heart" horiz-adv-x="922" d="M461-80q-13 0-23 9l-321 309q-1 1-19.5 20t-40 50.5-39.5 73-18 87.5q0 114 65 177.5t181 63.5q34 0 66-11.5t60-29 51-37 38-34.5q15 15 38 34.5t51 37 60 29 66 11.5q116 0 181-63.5t65-177.5q0-31-8.5-59.5t-21-54-28-46.5-28.5-36.5-22-24.5l-10-10-321-309q-9-9-22-9z" />
<!--new cross icon-->
<glyph unicode="" glyph-name="cross" horiz-adv-x="684" d="M403 306l261-261-61-61-261 261-261-261-61 61 261 261-261 261 61 61 261-261 261 261 61-61z" />
</font>
</defs>
</svg>
Since svg fonts are deprecated (or not supported anymore by most modern browsers) you need to compile a new icon font from your edited svg.
Import your svg in icomoon via "Import icons" button
Select all glyphs you want to import
click "Generate Font"
Optional: you can edit unicode and glyph names (only needed for the automatically generated css)
Unzip the package and add your updated fontfiles to your fonts folder
make sure your @font-face rule is correct (if the font file name was changed)
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.woff?z6h4tt') format('woff'), url('fonts/icomoon.ttf?z6h4tt') format('truetype'); font-weight: normal; font-style: normal; font-display: block; }
I also recommend to prefer the smaller woff format.
(icomoon's generated css still prioritizes truetype).
Now you should be able to place your icon like so:
.cross:before {
content: "\e90a";
}