Issue with Font Awesome icons not displaying properly in 6.1.1

Rebecca shared this problem 4 years ago
Solved

When I try to view the "Font Awesome" icons in Simulate mode, view it from a shared online prototype, or export it to HTML they don't display correctly and just show a square box.


847c945ce396f8967bba0a57438edeca

Best Answer
photo

You can download Font Awesome UI elements here.

Once they're downloaded, you can import them into your Justinmind application and start using them in your prototypes.

Comments (33)

photo
1

Hi Rebecca,


Is it possible that you had Font Awesome installed on your computer before opening the Widget library? - If so it is probably conflicting with Justinmind's Font Awesome.


Can you check if in Justinmind when you select a Font Awesome widget if a red box with an F appears next to the Font name in the font dropdown in the toolbar?


Also, could you let me know which browser you are using when you simulate, exporto to HTML and view it in your Justinmind account?


Best,


Marc

photo
1

I am having the same problem, so I will give you some additional information.


I do have the red F next to the font name. Definitely did not have Font Awesome installed prior to using Justinmind. However, the Font Awesome might have been used for the first time with 6.0, instead of 6.1.


I am resizing the fonts from the default 22 points to 14 points. Any value other than 22 will generate the problem.


I am using the Simulate button that pops up a Chromium portable browser instance.


The solution was odd. If I add a single Font Awesome icon anywhere in the prototype, and do not resize it, then all of the icons display correctly. I am using this as the workaround until you are able to fix the problem.

photo
1

Have you downloaded the library from this web page http://www.justinmind.com/widgets? I say so because the problem you describe is very similar to one that happened with the beta version of that library. If you had a previous version of the library installed, then try removing that library from the libraries dialog and also removing the .ttf file from the fonts folder that is inside the application installation's folder.

photo
1

I only downloaded the Font Awesome library (from the /widgets link) after the 6.1.1 install so I did not have a previous version. It did have a red box with an F next to the font name. However, I deleted the Font Awesome widget, removed the font from the installation folder, and closed the project. Then I went to the /widgets link, re-downloaded, and then opened my project and added the widget to my library again. I ran into the same issue.


I'm using Chrome for the simulate, export, and Justinmind Usernote prototype viewing. However, I also tried viewing the prototype with Usernote in IE and experienced the same issue - however instead of squares there just wasn't an icon displayed.


I can confirm Alan's scenario too - if I drag and drop and leave them without any modification then they display fine. However, if I change the size of the icon then I see the square. Even changing the size back to 22 doesn't work - I have to start over and drag the icon from the library again. Also, if I change any icon size on a screen (page) then all of the icons break.

photo
1

Could you describe your computer please? We will try to reproduce the case in our offices.

photo
1

Suddenly it's working fine when I resize the icons. I couldn't get it to reproduce the issue no matter what I did. When I compare the exported project folder that didn't work to the one that works now, the "font" folder is missing. Maybe I just needed to save the prototype after redownloading the Font Awesome widget and re-adding the icons before simulating. I had also restarted the Chromium portable browser through Task Manager (and it said it had to "clean up" and then start again).

photo
1

I have the same problem. I just downloaded Font Awesome today for the very first time. I'm using Prototype v6.1.1.


I too can simply resize one of the icons and then all of them display correctly. If I delete that one resided icon, then all again display incorrectly. This happens for all screens, not just the screen with the resized icon.


Regards,


Jon

photo
1

Got delayed responding about this problem because my trial expired and now I'm signed up for the subscription.


I downloaded the current Font Awesome from the JIM website and created a new prototype. Inserted three Font Awesome icons. Resized two of them, the simulation works. Resize the third one, all icons turn into vertical lines:


896e8e144e4bf8ee5782ed9212611521


It is possible that the first time I used Font Awesome I was running build 6.0. Is there some other uninstall step that I should have followed to clear up this problem?

photo
1

Uninstalling the product and installing the latest version should fix the problem.

photo
1

Having the same issue. Has anyone solve it?

photo
1

Hi,


Have you tried Victor's suggestion: Uninstalling the product and installing the latest version?


Best,


Marc

photo
1

FYI. Uninstalling and re-installing worked for me.

photo
1

I've similar issue. In my case, I see some question marks instead of icons in the simulation mode. Resizing the icons is not possible for me.


I have the latest version 6.2 and downloaded the widget from http://www.justinmind.com/widgets.


There is also a red box with a F inside next to the FontAwesomeJim-dropdown.


I would appreciate for your help.

photo
1

btw. My platform is windows 7 .

photo
1

We have installed version 6.3 and also have the same problem. We used the library first time in 6.3. We have also reinstalled JIM, but the problem still exists.

photo
1

I'm seeing the same issue again (squares instead of icons) after installing 6.3. I've tried uninstalling the Font Awesome widget, re-downloading, and then adding it back and I still see the issue.


My current workaround: have at least one icon with the default size on the page. You can change the color to the background so it blends in, but don't touch the size.

photo
1

Hi Rebecca. Thanks for the workaround. This works for me also with following constraints:


1. I have to delete all Font Awesome Icons in a screen first.


2. I can't change the color of the icon, because this breaks the workaround. I hided the font behind a white rectangle instead.


Would be great, if the bug is solved soon.

photo
2

Hi everyone,


The widget library has been modified and should solve the issues you are having.


Please erase the widget library by navigating to Widgets -> Add/Remove libraries and removing the library.


Then download the new FontAwesome widget library from here: http://justinmind.com/widgets and add it to Justinmind.


If you have any issues with the new library please let me know.


Best,


Marc

photo
1

Marc,


This seems to have fixed the problem! After reinstalling the new font library I deleted the hidden placeholder FontAwesome character from a project. It now displays correctly in the Chrome simulate mode and a published copy displayed in Firefox Release 32.


Thanks for keeping on this to fix it, as the FontAwesome characters are very useful.

photo
1

This did seem to fix the issue, though I had to replace the previously existing icons with the new library icons for it to work correctly (the old ones would not display right). I also updated to 6.3.1 today and didn't see any problems with the icons either.

photo
1

I recently updated to 6.9.1 and then started seeing question marks boxes instead of Android material design icons in my prototype. Any suggestions to fix those boxes?

photo
1

Hi Kyle,


Sorry for our late response. Which OS are you using?


Best,


Sonia Durán

photo
1

I use 7.0.0 and I have the same problems as Kyle. However, instead of Android Material Design icons, I am using Font Awesome.


I am using OSX 10.11.2.


I have also tried the above solutions, uninstalling and reinstalling widgets and Justinmind itself.

photo
1

Hi Ryan,


Thank you so much for taking the time to report this bug. This issue is already on our product's backlog and our team is working hard to find a resolution to this issue as soon as possible. We'll let you know once it has been solved.


Sorry for any inconvenience.


Best,


Sonia Durán

photo
1

Hy Sonia, is there a way to embed a private font in JIM? Our clients often use their own fonts and on devices they are ignored.


Thank you

photo
2

Dear Paolo,

This is happening because they're using a custom font that's not installed on their devices. Unfortunately, to visualise correctly the prototype you will need to use any of the preinstalled fonts at Justinmind or any of the Google fonts package.

Also as a workaround, you could try installing the font you want to use directly on the mobile phone but unfortunately we can't provide you with any support on this.

Best,

Sonia Durán

photo
1

Ok Sonia, will a custom plugin solve the problem?

photo
1

Dear Paolo,


Can you specify what you mean by a "custom plugin"?


Best,


Sonia Durán

photo
1

hi Sonia, I mean a java plugin like your fontawesome.jpl.

photo
1

Hi Paolo,


Yes, this could be a workaround.


Best,


Sonia Durán

photo
1

thank you very much

photo
1

You need to have supporting font faces referred in the fontawesome.css place the fonts folder


'../fonts/fontawesome-webfont.eot?v=4.7.0');

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');

photo
photo
1

You can download Font Awesome UI elements here.

Once they're downloaded, you can import them into your Justinmind application and start using them in your prototypes.