pors / reactionic-kitchensink

Kitchen Sink Demo for React-Ionic
Other
39 stars 25 forks source link

All icons disappear! #16

Open flyisland opened 8 years ago

flyisland commented 8 years ago

I have just downloaded and ran this example by following the README, and it seems that all icons disappear!

2016-06-18 12_11_32-window

gabrielseco commented 8 years ago

I have downloaded the repo and I couldn't reproduce this, it works for me.

The screenshot you show is in an android device right?

flyisland commented 8 years ago

@gabrielseco I'm using Windows 10, and used Chrome to access "localhost:8080", and the screenshot is captured by chrome with "device mode" in "developer tool"

And I have just try it again with centos 6.5 and firefox, got the same result.

flyisland commented 8 years ago

btw, I'm using webpack by following:

cd reactionic-kitchensink
npm install
webpack
webpack-dev-server --content-base build
gabrielseco commented 8 years ago

I was using meteor, I tried using webpack and it's loading the icons.

I'll try from a windows device.

captura de pantalla 2016-06-18 a las 18 29 07
flyisland commented 8 years ago

yes, it's quite confused, since all the functions is OK, just lost these icons. localhost-8080- galaxy s5

Is the following icon's style content is right? 2016-06-19 08_31_14-reactionic react ionic 2016-06-19 08_26_05-new notification

gabrielseco commented 8 years ago

If you open the chrome with developer tools, and you click in the tab network.

It should load ionicons fonts.

captura de pantalla 2016-06-19 a las 10 27 53
flyisland commented 8 years ago

It seems that all fonts are missing! And idea to fix it? 2016-06-19 23_24_55-reactionic react ionic

gabrielseco commented 8 years ago

In the next route app/public/fonts there should be four files with the fonts.

If there are present, you could try removing reactionic from node-modules and installing it again

flyisland commented 8 years ago

@gabrielseco I re-downloaded the https://github.com/reactionic/reactionic-kitchensink/archive/master.zip, and followed your instruction to build the project, but got the same result again.

Since the Chrome says /fonts/ionicons.ttf is not found, so I renamed the file \build\fonts, and copy the fonts folder from node_modules\reactionic\dist\scss\ into \build, just like below:

D:\DevProjects\reactionic-demo\build>dir
 Volume in drive D is Data
 Volume Serial Number is 4AE4-3C93

 Directory of D:\DevProjects\reactionic-demo\build

2016-06-20  11:28    <DIR>          .
2016-06-20  11:28    <DIR>          ..
2016-06-20  10:42    <DIR>          fonts
2016-05-05  07:12                42 fonts.old
2016-05-05  07:12               421 index.html
2016-06-19  23:17         2,004,294 index.js
               3 File(s)      2,004,757 bytes
               3 Dir(s)  75,198,185,472 bytes free

D:\DevProjects\reactionic-demo\build>dir fonts
 Volume in drive D is Data
 Volume Serial Number is 4AE4-3C93

 Directory of D:\DevProjects\reactionic-demo\build\fonts

2016-06-20  10:42    <DIR>          .
2016-06-20  10:42    <DIR>          ..
2016-06-19  23:00           120,724 ionicons.eot
2016-06-19  23:01           333,834 ionicons.svg
2016-06-19  23:01           188,508 ionicons.ttf
2016-06-19  23:01            67,904 ionicons.woff
               4 File(s)        710,970 bytes
               2 Dir(s)  75,198,185,472 bytes free

D:\DevProjects\reactionic-demo\build>

And now the icons appears!

So this is a workaround, but we still need an official solution to fix it.

gabrielseco commented 8 years ago

I tried today in a windows and I could reproduce the problem.

It seems that the Symbolic Link in the build called fonts it's not working in windows.

@pors how about we put directly the fonts in the build to save the windows problem or it occurs you another idea to solve this.

pors commented 8 years ago

@gabrielseco good find! Hmm, yes. Windows does support symlinks I think? It would be cleaner if we could have symlinks that work everywhere, but I have never looked into that. You guys have any ideas?

If we can't make a symlink work on Windows then copying it into the build directory is OK I guess. We have to remember to update these files when we update reactionic itself.

gabrielseco commented 8 years ago

I'll give it a try this week to this issue and #17.

People had some issues accessing from windows, I'll try from there to see what I can do.

pors commented 8 years ago

Awesome

On Monday, June 20, 2016, Gabriel García Seco notifications@github.com wrote:

I'll give it a try this week to this issue and #17 https://github.com/reactionic/reactionic-kitchensink/issues/17.

People had some issues accessing from windows, I'll try from there to see what I can do.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/reactionic/reactionic-kitchensink/issues/16#issuecomment-227258624, or mute the thread https://github.com/notifications/unsubscribe/ABB0MPk--huyOcAgGmX-LHHABtxoO7c2ks5qNvc_gaJpZM4I43dn .

flyisland commented 8 years ago

I think the build folder should work without depending on other assets, so i could make the build on a linux box and copy the build folder to a windows machine, it should still be okay

aminur commented 8 years ago

I am still facing this issue even after renaming 'fonts' in 'build' directory to 'fonts.old' and pasting in a copy of the 'fonts' directory from node_modules\reactionic\dist\scss\

on Windows 7