Adding new Icomoon icons

I followed instructions I found here (sorry, lost the link) to add custom icons. But it does not work as described. Once I add css, all the standard icons stop working.

Here are the instructions I am trying to follow:

You can create your Own Font Icons by using the following Instructions:

1. Make sure you have a Vector PNG Icon. Convert this Icon to SVG using any Online Service available through Google. Try this one: http://image.online-convert.com/convert-to-svg . Save the new SVG File.

2. Open the Icomoon Icon Font Generator App: icomoon.io/app/#/select and import the following json File: https://www.dropbox.com/s/ufbrh3zg2dgvue2/selection.json?dl=0 .

3. Now Import the New SVG Icon Files and check if they are looking fine. Now Move them Down below the Default Imported Font Icons (This is an Important Step). Make sure you have Selected the New Icons.

4. Now click on the Generate Font Link and search for the New Icons you imported so that you can rename them properly according to your needs. Do not change the Default Font Icon’s names.

5. Now you can simply add the Newly Generated Icons CSS File in the Document  to show your icons.

These instructions should definitely work fine. Do let us know if you face any issues with this.

Meanwhile, do let us know if we can help you with anything else or if you find any other issues.

And here is the css generated:

@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?j4xdfl');
   src:  url('fonts/icomoon.eot?j4xdfl#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?j4xdfl') format('truetype'),
      url('fonts/icomoon.woff?j4xdfl') format('woff'),
      url('fonts/icomoon.svg?j4xdfl#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

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

It destroys all the original icons refs and they are all blank or Asian characters.

Please help!

Thanks!

Thank you for your help!

See http://beta.of-g.com/index-icon-test.html

Icons are in share bar on left and at footer. New icon CSS is added in header. This does not add the new icon at all; these are just standard icons.

Here is same without new icon CSS: http://beta.of-g.com/

I appreciate your help! I am new to icons.

Hi,

Thanks for getting back to me. Unfortunately, adding the fonts directory and files did not help. Still get Chinese characters for my standard icons. Any other suggestions?

Thanks!