Overriding a toobar icon with one of my own

Posted almost 6 years ago by Matt

Post a topic
Answered
M
Matt

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

0 Votes

Bahati

Bahati posted almost 6 years ago Best Answer


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

fancy-product-designer\assets\css\fonts

 

image


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

0 Votes


5 Comments

Sorted by
Bahati

Bahati posted almost 6 years ago

Glad to here Matt 

Cheers

Bahati

0 Votes

M

Matt posted almost 6 years ago

Thanks Bahati,


All working now.  Thanks for your help again.


Matt :)

0 Votes

Bahati

Bahati posted almost 6 years ago

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.

image



Let me know if you have any other issues while doing this.

Regards,

Bahati


0 Votes

M

Matt posted almost 6 years ago

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

0 Votes

Bahati

Bahati posted almost 6 years ago Answer


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

fancy-product-designer\assets\css\fonts

 

image


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

0 Votes

Login or Sign up to post a comment