Creating New Icon Pack

Question:

We are trying to use your 4K Icons for Visual Composer plugin and add a 6th pack – the Icomoon “Ultimate” pack found here: https://icomoon.io/#icons-icomoon
So far we’ve created a new folder “4k-icons-pack06” and dropped in the “4k-icon-pack.php” making the appropriate changes from 05 to 06 and included the correct .eot, .svg, .ttf, .woff files (which we’ve named imp.eot etc.) in /icons/fonts/ and activated the pack as a plugin.
Then we modified the main “4k-vc-icon-shortcode.php” file inside the main “4k-icons” folder, changing NUM_FONT_PACKS to 6 and adding our sprintf lines to the createIconSettingsField function with “Icomoon – Premium” and “imp-“.
Then we modified the files script-vc.js and script-vc-ck.js to add the link to our imp.css file. 
Then we saw the lists of all the icons in icon-contents.php, font-js-classes.php, and font-classes.php, and we noticed the python scripts for generating these lists. Not being very skilled with python we manually added a single icon from the premium pack (icon was called “direction” and imp-direction) to these three files (with the right character code for the icon for icon-contents.php) just to see if it would come through.
Now from within Visual Composer we can see the option “Icomoon – Premium by Keyamoon” in the drop down and we can see a square representing our one icon, but the icon itself doesn’t show, so clearly we are missing a step, or several.
  • Can you think of any steps that we are missing?
  • Even if we didn’t have the full list of icons in the font added to the font-js-classes.php, font-classes.php, and icon-contents.php files, is there any reason that the one icon that we’ve added manually to these three files wouldn’t show? (assuming we’ve added it to those files correctly)
  • Can you give us any additional information that might help us make this work?


Answer:

Here are some of our answers regarding the questions:

Can you think of any steps that we are missing?
A way to generate a 'searchable' list for Visual Composer. Which we'll mention the steps on the last question.

Even if we didn’t have the full list of icons in the font added to the font-js-classes.php, font-classes.php, and icon-contents.php files, is there any reason that the one icon that we’ve added manually to these three files wouldn’t show?
It is probably because the icon isn't loaded properly.

Can you give us any additional information that might help us make this work?
As what mentioned earlier regarding the "python scripts for generating these lists" here is how we do it:

Step 1. Add a CSS folder with your icon CSS. You can always just copy the style from our existing ones.
Step 2. look for 'util-generate-php-icon-css.py', edit it and comment out line 5 to prevent from closing.
Step 3. Run 'util-generate-php-icon-css.py' from your plugin folder.
Step 4. Copy the contents it generated from /tmp/icons.php to icon-contents.php

From there, your icons should load properly.