Icon images in toolbar appear broken

[IgorWilbert]

Please describe the problem (or idea)

The image icons in the toolbar and other buttons appear broken after simply running grunt build and opening /examples/index.html, nothing else.

The image icons should appear normal, just like in the demo version.

Please show us where to look

https://publiclab.org/ ...

What's your PublicLab.org username?

This can help us diagnose the issue:

Browser, version, and operating system

Windows 10, Firefox Quantum 64.0.2

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[IgorWilbert]

If this happens to be a valid issue (not related to my setup), this seems to be simple enough to be a FTO-candidate, but I haven't investigated it yet.

[rexagod]

Hmm. This is something new. Would you mind telling me the order of steps you followed to set this up? Also, I think we can open this as an fto once we find the bug that's causing this.

Thanks!

[sagarpreet-chadha]

Hi all ! Most probably it is due to CORS issue of font-awesome (you may see the console in your browser for more detailed error describtion) . Thanks !

…

On Sat, Jan 19, 2019 at 10:57 AM Pranshu Srivastava < ***@***.***> wrote: Hmm. This is something new. Would you mind telling me the order of steps you followed to set this up? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#240 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOQoxbGVWMgXcZn_GHHdKcv7EiFFXqCtks5vEqzGgaJpZM4aI2eu> .

[rexagod]

@sagarpreet-chadha How about storing a local copy of font-awesome on the repo so we don't face such issue? @IgorWilbert could make a fto on that instead. What do you think?

[IgorWilbert]

Hey @rexagod , I proceeded the installation steps from README, opened the project in my terminal, ran grunt build and opened examples/index.html. @sagarpreet-chadha yes, indeed there's an error in the console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/igorh/Documents/GitHub/Public%20Lab/PublicLab.Editor/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0. (Reason: CORS request is not HTTP). @rexagod turning it into a fto sounds nice, I'd like to do that! :)

[rexagod]

@IgorWilbert The Same Origin policy states that two web pages can exchange resources only if they have the same origin, i.e., domain/host. When you run index.html on your fs, you do not have a HTTP/HTTPS domain, instead the file:// protocol, hence the Same Origin Poilicy blocks the CORS in return. Try running it on your localhost instead and let me know if it resolves this issue or not.

[IgorWilbert]

@rexagod yes, the problem disappears using live-server, thank you for the help and sorry for creating this issue. Should I update README to explain better this part of accessing index.html, so that no other will have this trouble, or do you think it is quite obvious?

[grvsachdeva]

Hi @IgorWilbert, you can add it as information so that new contributors don't face such issues. And, it's worth opening issue, we always discover a new problem or effective solution. Thanks!