Revise icon contribution steps in CONTRIBUTING.md

Updated the steps for adding new icons in Icomoon, including file names and processes for importing and exporting icons. Added instructions for updating project files and committing changes.

Author: UnschooledGamer

CONTRIBUTING.md

@@ -181,29 +181,24 @@ Many font editing software and web-based tools exist for this purpose. Some of t
 
 ### Steps in Icomoon to add new Icons
 
-1. Download the `icons.ttf` file from https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons
-2. Go to https://icomoon.io/ > Start a new Project
-3. Import the `icons.ttf` downloaded (in step 1)
+1. Download the `code-editor-icon.icomoon.json` file from https://github.com/Acode-Foundation/Acode/tree/main/utils
+2. Go to https://icomoon.io/ > Import
+3. Import the `code-editor-icon.icomoon.json` downloaded (in step 1)
 4. All icons will be displayed after importing.
 5. Import the SVG icon created/downloaded to be added to the Font Family.
-6. On the right side, press **enable Show Characters** to view the Unicode character for that icon.
-7. Copy the newly added icon's Unicode character (required for later steps)
+6. On the right side, press **enable Show Characters** & **Show Names** to view the Unicode character & Name for that icon.
+7. Provided the newly added SVG icon with a name (in the name box).
 8. Repeat Step 5 and Step 7 until all needed new icons are added.
 9. Press the export icon from the top left-hand side.
-10. Add **Font** in the formats section, expand the **Font**, enter **code-editor-icon** as the font-family for `icons.ttf` file.
-11. Press the download button, and a zip file will be downloaded.
-
-### Adding the Unicode characters to style.css
-
-1. Open the `style.css` file present at https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons
-2. Add a new class called `.icon.icon-name:before` e.g ```.icon.all_inclusive:before { content: "\ea18"; }```
-3. `content` (i.e., `ea18` -> `\ea18`) property's value is the Unicode Character copied after importing the icon in the font family.
-4. Save the `style.css` file.
-5. Extract the downloaded zip file; navigate to the `fonts` folder inside it.
-6. Rename `code-editor-icon.ttf` to `icons.ttf`.
-7. Copy & paste the renamed `icons.ttf` into https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons
-8. Commit the changes **ON A NEW branch** (by following: [Commit Messages guide](#commit-messages))
-5. commit the changes **ON A NEW branch** (by following: [Commit Messages guide](#commit-messages))
+10. Press the download button, and a zip file will be downloaded.
+11. Go to the Projects section of [icomoon](https://icomoon.io/new-app), uncollapse/expand the Project named `code-editor-icon`  and press the **save** button (this downloads the project file named: `code-editor-icon.icomoon.json`)
+
+### Updating Project files for Icon Contribution
+1. Extract the downloaded zip file; navigate to the `fonts` folder inside it.
+2. Rename `code-editor-icon.ttf` to `icons.ttf`.
+3. Copy & paste the renamed `icons.ttf` into https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons
+4. Copy and paste the `code-editor-icon.icomoon.json` file (downloaded in the adding icons steps) onto https://github.com/Acode-Foundation/Acode/tree/main/utils (yes, replace it with the newer one; we downloaded!)
+4. Commit the changes **ON A NEW branch** (by following: [Commit Messages guide](#commit-messages))
 
 ## 🔌 Plugin Development