Answered
Overriding a toobar icon with one of my own
Hi,
I would like to have my own icon for one of the toolbar icons. Can anybody help with the best way of changing one of the icons. The icon I would like to change is : fpd-icon-text-input
Many thanks
Matt
Hi Matt ,
Here are some tips
First FPD uses svg icons.You can convert your icon to svg easily online or by using some graphic software but the trick will be for you to keep the propotions right to match those used by FPD. If you have never done dabble with svg you can read the attributes documentation here I will advice you to take a look at the FPD sgv icons in this file path below
You can replace the text-input svg code and test. Remember this will override when you update FPD.
Let me know how it goes.
Regards,
Bahati
Hi Bahati,
I really appreciate you taking the time to reply. I am not sure if I am going about this the right way. To view the icons I pulled the single FontFPD.svg file from fancy-product-designer\assets\css\fonts into https://icomoon.io/app as I was'nt sure how to view the individual icons. I was then able to pull out the text-input icon and edit in illustrator. I now have a single edited text-input.svg icon which is the same size but I'm really not sure how to bundle it up together back into single FontFPD.svg file (or Sprite?).
As a novice I may just have to abandon the idea if I am barking up the wrong tree but if I'm 80% there then I would be very grateful for a final push over the finishing line :)
Kind Regards
Matt
Hi Matt,
I think your almost there. Yesterday i tried to test just coping the svg code to the FDPfont.svg file but it didn't work this was because i forgot to generate and replace the previous FDP font files.
Here is what I did and it worked.
1. First go back to the website https://icomoon.io/app and import the FontFPD.svg file.
2. Select the icon you want to modify and use the iconmoon website to modify it (more easier) or replace it the specific icon with a new upload.
3.Click on generate font
4.After the font have been generated you will see a small setting icon near the Generate font button click on that and change the Font Name to FontFPD and leave the other options as default.
5.Download the font file and extract the fonts folder from the zip file.
6.Backup your old fonts folder in your FPD directory and replace them the old font folder with the extracted font folder.
My results.
Let me know if you have any other issues while doing this.
Regards,
Bahati
Thanks Bahati,
All working now. Thanks for your help again.
Matt :)
Glad to here Matt
Cheers
Bahati