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?

1. If I added glyph to the list:

... ICNOMON.svg file 

... rest of icons, 
<glyph unicode="&#x20;" glyph-name="cross" d="M465.917 207.36c-35.84 0-66.5....." />

2. Then in a CSS file I added this:

.icon-cross:before {
  content: "\\e90a";
}

3. Stil icon is not shown, does anyone knows why?

CodePudding user response：

Make sure the glyph's unicode value is correct

If 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="&#x20;" horiz-adv-x="200" d="" />
    <!--heart-->
      <glyph unicode="&#xf004;" 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="&#xe90a;" 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>

SVG fonts are only used as an editor format by icomoon

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.

1. Import your svg in icomoon via "Import icons" button

2. Select all glyphs you want to import

3. click "Generate Font"

4. Optional: you can edit unicode and glyph names (only needed for the automatically generated css)

5. Unzip the package and add your updated fontfiles to your fonts folder

6. 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";
}