Can I make a custom icon font widget library like the iOS 8 icons?

Bart Welt shared this question 3 years ago
Answered

I know I can create a widget library based on SVG or PNG files, but I'd like to use my company's custom icon font to create the library. The main reason for this is to be able to change icon colors in the interface.

Comments (22)

photo
1

Hi Bart,


To do so, create a .ttf file with all the icons and place the file in the Justinmind's font folder ("[Justinmind's installation folder]/Justinmind prototyper 6.4.0/fonts). Then, create a new widget library, place the font icons on the screen and drag them to add them into the new widget library created.


Regards,


Lidia

photo
1

Thanks Lidia, that worked.

photo
1

What is the file path to do this for 7.0? There doesn't seem to be a font folder where you reference above...


I'm on a mac if that helps.


Best regards,


Jeremy

photo
1

Hi Jeremy,


You should follow this path:


1.Open the applications folder and look for Justinmind


2.Right click on Justinmind and select Show Package contents in the


contextual menu.


3.Open this folder: Contents/Resources/java/fonts


Kindly let me know how it goes.


Best,


Sonia Durán

photo
1

Hello,


I did it using Justinmind prototyper 6.5.1.


It is working properly for the creation - screens or libraries. However when I am generating the prototype, the icon fonts is not included in the project. Is this normal?


Many Thanks,


Aurélie

photo
1

Hi Aurelie,


Could you please elaborate more on what you mean?


Best,


Sonia Durán

photo
1

Hi Sonia,


Thank you very much for your reply.


I added the icon font file in the folder as explained here.


So now, when I am editing a prototype, I am able to add these icons on the screens I am creating/modifying.


However when I am simulating the project with the "simulate" button or generating the HTML version from File>Export to HTML, instead of these icons I only have the default square symbol.


I hope this was clearer... Otherwise I can try again :)


Many Thanks,


Aurélie

photo
1

Hello,


I updated my version of Justinmind from 6.5.1 to 7.1.0.


However I still have this issue.


For complementary information I am using Justinmind on Windows.


Thanks,


Aurélie

photo
1

HI Aurelie,


Have you tried using a different Browser?


Best,


Sonia Durán

photo
1

Hi Sonia,


Thank you very much to follow this. I'm sorry I didn't answer earlier, the page never refreshed with your answer!


I tried using Firefox and Chrome, for the "Simulate" button and also after having generated the HTML prototype. Unfortunately, it's still the same problem.


I also noticed my customized icons font - the ttf file - does not appear in the "fonts" folder of the generated HTML prototype. I tried to copy it inside to see if it will change anything: unfortunately no, the project always appear with the default square icon instead of the wanted icon.


Regards,


Aurélie

photo
1

Hi Aurelie,


We've been doing test on our last release 7.1.1 and it's working correctly. Please, make sure that you have copied the file into the path provided and also that you have imported into prototyper using the button "add" that is at the dropdown list of fonts.


Kindly let me know how it goes.


Best,


Sonia Durán

photo
1

Hi Sonia,


Unfortunately it is still not working... :(


As you requested, I tried and did this:


1. My version of the prototyper was 7.1.0 - "check for update" indicates the version was up to date. So i uninstalled it, downloaded the installer from Justinmind website and installed it. The version on my computer is now 7.1.1.


2. I copied my custom icon font here: [Justinmind installation folder]Justinmind Prototyper 7.1.1fonts as explained in Lidia's post.


I copied the TTF file and the EOT file - as I can see the default fonts have both.


3. I opened my project, selected one of the icon and tried the "add" button. In the popup where you have some web font you can download and add, mine was not in the list. However it was already available in the selectable fonts list for the label.


3bis. I also tried by creating an Android project from scratch, adding an icon from my custom icons library - and also from scratch by adding a new label and selecting my custom icon font.


And the issue is still the same: I can use my custom icon font to create the prototype. However when I am clicking on "simulate" or "generate HTML" I only have squares instead of my icons...


What am I doing wrong?


Also I would like to clarify something, as in the first question, I want to use my own custom icons font which is not a downloadable one as the "add" button provides.


Many Thanks for taking care of my issue, it does not look as an easy one.


Regards,


Aurélie

photo
1

Hi Aurelie,


That's odd. You should take into account the following things:


1.Check that the font name does not match with any of the Google fonts that already exist on Prototyper (this is very important).


2.When including the ttf inside the fonts folder and after restarting Justinmind the font should appear at the "add" dialog.


3.The name of the font is not the same as the ttf file. It is the one located inside the file. This files can be edited with an app as FontForge.


Kindly let me know how it goes.


Best,


Sonia Durán

photo
1

Hi Sonia,


So I checked the file to get the font name and if it matches any of the Google fonts, it does not.


I removed all customized fonts, started justinmind, created a new project: none of my customized fonts were available - directly in the fonts list or the add list.


I closed justinmind, added the files in the font folder.


And I did the same: restarted justinmind, created a new project, added a label. Then, I opened the select list. I could notice that my font was already in the list without having to use the "add" button. If I am clicking on the add button, it does not appear on the dialog font list...


I also tried to create an iPhone project instead of an Android one in case, it didn't change the problem...


Regards,


Aurélie

photo
1

Hi Sonia,


I retried by using a new icon font I created myself with only one icon inside - just a circle represented by typing a "a".


I first checked the name of the font which is exactly the same as the file name: "untitled-font-2".


Then I opened Justinmind, create a new project (Android project).


After I added a text to be able to access to the font choice. I clicked on the font choice and I could see the font I added directly already in the font list. I clicked on the "add" button and as before it does not appear on that list as it is already on the available font list...


So the problem is still the same: I can see my icons when I am working on the prototype with the Justinmind prototyper software for Windows. However when I generate the HTML prototype - by simulating or with File>Export to HTML - the font is not used and the default one is used; So I can see a proper "a" instead of my circle in this case.


Regards,


Aurélie

photo
1

Hi Sonia,


Just to let you know that by adding the font policy to my system policy it has fixed the issue when the project is working on my computer - which is logic as the browser is using the system fonts. However my custom font is still not part of the generated prototype.


Regards,


Aurélie

photo
1

Hi Aurelie,


I'm glad to hear that. :) What do you mean by generated prototype?


Best,


Sonia Durán

photo
1

Hi Sonia,


I meant "exporting the prototype" by using "File>Export to HTML". By checking the HTML and resources files, the font is not exported with it.


Regards,


Aurélie

photo
1

Hello,

I have version 8.2.0 and try to add a custom fonticon library to Justinmind.

I'm on Windows 10 and don't see any font folder. Any idea where it's hidden?

Thank you

Alex

photo
1

Dear Alexandre,

Can you elaborate more on what you mean? Are you trying to add a custom font to your prototype?


Best,

photo
1

Yes, i have a corporate fonticon (.tff file) that I want to be able to use within my prototype.

I tried to apply lidia's explainations but i don't find the font folder.

photo
1

Dear Alexandre,

Unfortunately, there isn't any option that embeds fonts automatically at prototyper. In case you want to use a custom font you should install that font on your system.

However, the best solution to work effectively with your custom font is creating a widget library with the original SVG files. I recommend you have a look at the IOS library.

https://www.justinmind.com/widgets

Best,