Icomoon : how to avoid duplicate index (different icon with same content id)?

Question

I have a website with an icomoon.css file previously insered by someone else. Now I added my own icomoon css, renamed icomoon2. The problem is that now I have some icons with the same content id, ex: content: "\e976"; on both css files point to 2 different icons. So only one icon is displayd.

I don't have the original json file and I need both the icons.

I think I should change the content id in the css file, and then change accordingly in the .eot .svg .tiff .woff files right?

Answer 1

As @Rene van der Lende already pointed out: re-compiling your icon font is probably the best solution.

Import the svg font file in icomoon app (icomoon uses svg font files internally for importing icons)

Alternative: load both font families and add some overriding rules in css

You will need two @font-face rules:

@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'icomoonNew';
  src: url('fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.icon-share:before {
  content: "\e900";
}

.icon-missing:before {
  font-family: 'icomoonNew'!important;
  content: "\e90b";
}