cssicomoon

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


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?


Solution

  • 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";
    }