2

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?

H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37
Francesco
  • 23
  • 4
  • 2
    Use the online Icomoon app, change it there and re-export your version. Don't do manual hacks in generated files, nothing good can result from that... – Rene van der Lende Jul 08 '22 at 10:55

1 Answers1

0

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";
}
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34
  • Thak you, I didn't know you can import svg in icomoon! I thought you need the json file. Anyway also the other solution is smart, thank you. – Francesco Jul 11 '22 at 08:29