From 2f838dbaa2691d3a68afeb9b9165324d0c7f1d3c Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:17:57 +0530 Subject: [PATCH 01/11] update: CONTRIBUTING guide to document process for adding new icons Added instructions for adding new icons to the existing font family, including steps for using Icomoon and updating the style.css file. --- CONTRIBUTING.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 52e080657..c1e9fe4b3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -166,6 +166,41 @@ refactor: simplify file loading logic pnpm run lang update # Update translations ``` +## ℹī¸ Adding New Icons (to the existing font family) +> [!NOTE] +> Acode uses SVG and converts them into a font family, to be used inside the editor and generally for plugin devs. +> +> **Plugin-specific icons SHOULD NOT be added into the editor. Only generally helpful icons SHOULD BE added** + +Many font editing software and web-based tools exist for this purpose. Some of them are listed below. + +| Name | Platform | +|------|----------| +| https://icomoon.io/ | Free (Web-Based, PWA-supported, Offline-supported | +| https://fontforge.org/ | Open-Source (Linux, Mac, Windows) + +### 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) +3. All icons will be displayed after importing. +4. Import the SVG icon created/downloaded to be added to the Font Family. +5. On the right side, press **enable Show Characters** to view unicode character for that icon. +6. Copy the newly added icon's Unicode character (required for later steps) +7. Repeat Step 4 and Step 6 until all needed new icons are added. +8. Press the export icon from the top left-hand side. +9. Add **Font** in the formats section, expand the **Font**, enter **code-editor-icon** as the font-family for `icons.ttf` file. +10. Press the download button, and a zip file will be downloaded. + +### Adding the Unicode characters to style.css. + +1. Open `style.css` file present at https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons +2. Add new class called `.icon.icon-name::before` i.e ```.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 file, extract the zip file (downloaded), from the fonts folder, rename `code-editor-icon.ttf` to `icons.ttf`, copy & paste the `icons.ttf` onto https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons +5. commit the changes ON A NEW branch (by following: [Commit Messages guide](#commit-messages)) + ## 🔌 Plugin Development To create plugins for Acode: From ead4d095db4ebd9eae38c99b17737626d91db3d0 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:20:07 +0530 Subject: [PATCH 02/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c1e9fe4b3..7265111e6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -184,7 +184,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 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) -3. All icons will be displayed after importing. +4. All icons will be displayed after importing. 4. Import the SVG icon created/downloaded to be added to the Font Family. 5. On the right side, press **enable Show Characters** to view unicode character for that icon. 6. Copy the newly added icon's Unicode character (required for later steps) From 3d9f8c6f664bfbf1f21d7d978eada876053d0509 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:20:23 +0530 Subject: [PATCH 03/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7265111e6..de167a9b0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -176,8 +176,8 @@ Many font editing software and web-based tools exist for this purpose. Some of t | Name | Platform | |------|----------| -| https://icomoon.io/ | Free (Web-Based, PWA-supported, Offline-supported | -| https://fontforge.org/ | Open-Source (Linux, Mac, Windows) +| https://icomoon.io/ | Free (Web-Based, PWA-supported, Offline-supported) | +| https://fontforge.org/ | Open-Source (Linux, Mac, Windows) | ### Steps in Icomoon to add new Icons From 7e30659f99c6083c8f9aa785eec0821a7417184a Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:23:33 +0530 Subject: [PATCH 04/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index de167a9b0..26d1918e1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -196,7 +196,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t ### Adding the Unicode characters to style.css. 1. Open `style.css` file present at https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons -2. Add new class called `.icon.icon-name::before` i.e ```.icon.all_inclusive:before { content: "\ea18"; }``` +2. Add new class called `.icon.icon-name:before` i.e ```.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 file, extract the zip file (downloaded), from the fonts folder, rename `code-editor-icon.ttf` to `icons.ttf`, copy & paste the `icons.ttf` onto https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons 5. commit the changes ON A NEW branch (by following: [Commit Messages guide](#commit-messages)) From 3ec99c3052bac917187b2ffef75540498bc44910 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:25:48 +0530 Subject: [PATCH 05/11] Fix typos and improve clarity in CONTRIBUTING.md Corrected capitalization of 'Unicode' and improved clarity in instructions for adding icons. --- CONTRIBUTING.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 26d1918e1..e579043f9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -186,7 +186,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 3. Import the `icons.ttf` downloaded (in step 1) 4. All icons will be displayed after importing. 4. Import the SVG icon created/downloaded to be added to the Font Family. -5. On the right side, press **enable Show Characters** to view unicode character for that icon. +5. On the right side, press **enable Show Characters** to view the Unicode character for that icon. 6. Copy the newly added icon's Unicode character (required for later steps) 7. Repeat Step 4 and Step 6 until all needed new icons are added. 8. Press the export icon from the top left-hand side. @@ -195,9 +195,9 @@ Many font editing software and web-based tools exist for this purpose. Some of t ### Adding the Unicode characters to style.css. -1. Open `style.css` file present at https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons -2. Add new class called `.icon.icon-name:before` i.e ```.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. +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 file, extract the zip file (downloaded), from the fonts folder, rename `code-editor-icon.ttf` to `icons.ttf`, copy & paste the `icons.ttf` onto https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons 5. commit the changes ON A NEW branch (by following: [Commit Messages guide](#commit-messages)) From 8389a6054c2955ed34d9edafcbec6ab6efd14223 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:30:12 +0530 Subject: [PATCH 06/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e579043f9..96a066a15 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -199,7 +199,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 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 file, extract the zip file (downloaded), from the fonts folder, rename `code-editor-icon.ttf` to `icons.ttf`, copy & paste the `icons.ttf` onto https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons -5. 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)) ## 🔌 Plugin Development From 2c0b602d7bab641887c770e227b9e8a6c74d871a Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:30:29 +0530 Subject: [PATCH 07/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 96a066a15..229c1d2f3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -185,7 +185,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 2. Go to https://icomoon.io/ > Start a new Project 3. Import the `icons.ttf` downloaded (in step 1) 4. All icons will be displayed after importing. -4. Import the SVG icon created/downloaded to be added to the Font Family. +5. Import the SVG icon created/downloaded to be added to the Font Family. 5. On the right side, press **enable Show Characters** to view the Unicode character for that icon. 6. Copy the newly added icon's Unicode character (required for later steps) 7. Repeat Step 4 and Step 6 until all needed new icons are added. From 09ac36ca424e86266305677f15ad789fb15eeb30 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:30:39 +0530 Subject: [PATCH 08/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 229c1d2f3..42a7bacd1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -188,7 +188,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 5. Import the SVG icon created/downloaded to be added to the Font Family. 5. On the right side, press **enable Show Characters** to view the Unicode character for that icon. 6. Copy the newly added icon's Unicode character (required for later steps) -7. Repeat Step 4 and Step 6 until all needed new icons are added. +7. Repeat Step 5 and Step 7 until all needed new icons are added. 8. Press the export icon from the top left-hand side. 9. Add **Font** in the formats section, expand the **Font**, enter **code-editor-icon** as the font-family for `icons.ttf` file. 10. Press the download button, and a zip file will be downloaded. From a49b68760b520efee10f4de45491f29133be5e48 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:32:17 +0530 Subject: [PATCH 09/11] update: renumber steps for clarity in CONTRIBUTING.md --- CONTRIBUTING.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 42a7bacd1..16e5f4883 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -186,12 +186,12 @@ Many font editing software and web-based tools exist for this purpose. Some of t 3. Import the `icons.ttf` 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. -5. On the right side, press **enable Show Characters** to view the Unicode character for that icon. -6. Copy the newly added icon's Unicode character (required for later steps) -7. Repeat Step 5 and Step 7 until all needed new icons are added. -8. Press the export icon from the top left-hand side. -9. Add **Font** in the formats section, expand the **Font**, enter **code-editor-icon** as the font-family for `icons.ttf` file. -10. Press the download button, and a zip file will be downloaded. +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) +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. From 9d4984006c7a48d65b61ce5958a41e3b51b93d42 Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:39:35 +0530 Subject: [PATCH 10/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 16e5f4883..8cf37e752 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -193,7 +193,7 @@ Many font editing software and web-based tools exist for this purpose. Some of t 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. +### 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"; }``` From 661b6d28f4090819cdd5cd662fc80630b7a3894c Mon Sep 17 00:00:00 2001 From: Emmanuel Lobo <76094069+UnschooledGamer@users.noreply.github.com> Date: Tue, 10 Mar 2026 20:39:44 +0530 Subject: [PATCH 11/11] Update CONTRIBUTING.md Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- CONTRIBUTING.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8cf37e752..d176e75e4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -198,7 +198,11 @@ Many font editing software and web-based tools exist for this purpose. Some of t 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 file, extract the zip file (downloaded), from the fonts folder, rename `code-editor-icon.ttf` to `icons.ttf`, copy & paste the `icons.ttf` onto https://github.com/Acode-Foundation/Acode/tree/main/src/res/icons +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)) ## 🔌 Plugin Development