Comments (48)
aozora
commented on July 19, 2024
Sincerely I don't know what to tell you... There's no bug on icons, Chrome display the icons perfectly, as well Firefox and Opera and IE10. Maybe is your system instable or your browser damaged. Or your markup is missing something...
Please double check your markup before opening alarming issues...
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Image taken from icon example.
Icons are really not displaying fine to me in firefox, chrome. It displays fine in Opera.
My friend tested it out on his computer as well and its not looking fine either.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Turns out to be file corruption.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Despite trying all kinds of methods, 7zip, direct git, and a lot of ways, its still not displaying okay.
Here's all the methods we tried to prevent any form of file corruption.
We downloaded directly from github via server.
We tried pulling the git.
We tried different compression methods such as 7zip, bz2, tar and zip.
None work, its displaying weirdly on http://www.loomhosts.com/index.html
What could possibly be wrong?
I'm starting to doubt it is because of file corruption.
Firefox 17.0.1
Windows 7
Chrome 23 on Windows 7
Additional notes:
Running on cdn - http://cdn.loomhosts.com
image, css, icons were removed from original path of content:
Structure:
css
font
ico
image
scripts
Even without using CDN, its not working.
EDIT: Now its working fine but there's still abnormal positioning of icons.
from bootmetro.
commented on July 19, 2024
Well, from my Chrome 23 @ Windows XP it looks good:
However, from Firefox 16, its ugly:
You could try to correct your DOCTYPE:
If should read
not
Case matters.
from bootmetro.
aozora
commented on July 19, 2024
All pages of bootmetro are generated with <!doctype html> in lowercase, so why you find it in uppercase?
From what I see from your latest screenshot, it seems that the webfont icomoon is not downloaded correctly, please check the path in the section of your page, and if you could use the firebug extension in firefox, see if all the static resources are loaded correctly; maybe the IcoMoon.woff have problems to load...
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Thanks for help 👍 I must have missed out some RFCs.
from bootmetro.
aozora
commented on July 19, 2024
you are welcome :)
from bootmetro.
GIANTCRAB
commented on July 19, 2024
I tried removing the captilization, it still looks weird on IE and firefox.
from bootmetro.
aozora
commented on July 19, 2024
damn... try to disable all of firefox extensions
from bootmetro.
GIANTCRAB
commented on July 19, 2024
I disable firebug already, IE10 and Firefox is still displaying weird symbols and according to the relevant standards, its actually not <!doctype html>
from bootmetro.
aozora
commented on July 19, 2024
sorry, You are right. I'll fix this in all pages in the next commit, for now please change it manually in your pages. I'm in the middle of some changes and I cannot commit now.
from bootmetro.
JazzBeaker
commented on July 19, 2024
I'm having a similar issue where, intermittently, some IcoMoon elements don't show up in Chrome. Seems some others are seeing this, too:
The suggestion is to export the font using PUA (Private Use Area) encoding when exporting from the IcoMoon app. Indeed, I've noticed that I have NO problems with any IcoMoon elements that are at e000 (the start of PUA space), but I do have problems with elements below (with BootMetro, elements from 0021 to 007d).
I'm have no idea, however, if this is a temporary or known Chrome issue, or whether it is best practice to always use PUA encoding for custom fonts.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
@JazzBeaker, the issue is not only with the icons missing, they are also appearing very weirdly on Firefox and IE.
@aozora, still waiting for you(OP) to deliver the update.
from bootmetro.
aozora
commented on July 19, 2024
Maybe the problem is also related to this: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
@GIANTCRAB I know, please, be patient, I hope to commit in 2 days... I'm quite busy in these days with very little spare time... ;)
from bootmetro.
aozora
commented on July 19, 2024
I can regenerate the fonts with IcoMoon app forcing PUA, but that will have the side effect to change the codes for all icons... but I don't have choice I think...
from bootmetro.
JazzBeaker
commented on July 19, 2024
Thanks for the fast reply, aozora!
Yes, in very quick and limited testing, changing the order of the font sources has seemed to resolve the issue for me. In the icomoon.css file, I have changed this:
@font-face {
font-family: 'IcoMoon';
src: url('../font/IcoMoon.eot');
src: url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../font/IcoMoon.svg#IcoMoon') format('svg'),
url('../font/IcoMoon.woff') format('woff'),
url('../font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
to this (the .svg comes immediately after the first .eot - not sure if moving the second .eot?#iefix after this will cause IE6 to fail, however):
@font-face {
font-family: 'IcoMoon';
src: url('../font/IcoMoon.eot');
src: url('../font/IcoMoon.svg#IcoMoon') format('svg'),
url('../font/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('../font/IcoMoon.woff') format('woff'),
url('../font/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
It appears to be working, but I've only played around with it for a few minutes.
from bootmetro.
aozora
commented on July 19, 2024
Good. I know that also the eot is required to be the first for some version of IE.. In any case I'll regenerate the icons with PUA.... damn...I have to rewrite all the icons classes.... :(
from bootmetro.
aozora
commented on July 19, 2024
Just committed with the temporary fix as wrote by @JazzBeaker and other things; please see the updated CHANGELOG.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
The latest "fix" seems to have broke more things in chrome...
Now even normal images are in a circle.
from bootmetro.
aozora
commented on July 19, 2024
if you refer to the top right icons, that's not an incident, I changed them on purpose
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Why would you do that :c
Also, icons are still displaying weirdly.
from bootmetro.
aozora
commented on July 19, 2024
I thought that those links should display more like ...metro commands...
from bootmetro.
GIANTCRAB
commented on July 19, 2024
That's a pretty bad idea because if people wanted it, shouldn't they use the icons instead?
Its kinda restrictive.
Also, icons are still not appearing most of the time.
from bootmetro.
flipdoubt
commented on July 19, 2024
I like it because it mostly answers one of my nagging questions, which was how to make a metro command out of any icon. For example, I need a metro command for close, so I wanted to put a ring around one of the "x" icons. I came up with the following:
<button class="win-command"><span class="win-commandimage win-commandring"><span class="icon" data-icon=""></span></span></button>Which displays the following in my side-bar (in Chrome, by the way):
I say that "mostly answers one of my nagging questions" because the hover highlight is rectangular rather than square and because the command ring is larger than the other rings. Essentially, I want a ring around an "x" that works like .win-backbutton, with the same size, hover highlight, padding, etc. What is the best markup for that?
In general, the icons page could use some documentation on how to use the .win-* classes, when you would use an icon, a css class, or the data-icon attribute.
from bootmetro.
flipdoubt
commented on July 19, 2024
I think I got it by changing the markup as follows:
<a class="win-command close-charms" href="#"><span class="win-commandimage win-commandring"><span class="icon" data-icon=""></span></span></a>And the style as such:
.win-command.close-charms {
vertical-align: 24%;
}
.win-command.close-charms .win-commandring {
height: 32px;
width: 32px;
line-height: 32px;
}With that, everything lines up, but getting it to work is very trial-and-error -- heavy on the error.
from bootmetro.
aozora
commented on July 19, 2024
ok, I'll provide a doc page specifically for metro commands, with and without the rounded ring and various sizes.
Also, I want to discourage the use of codes like '' and using only the icon-* classes...
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Uh, any fix on the weird looking icons on Mozilla Firefox and IE yet?
from bootmetro.
aozora
commented on July 19, 2024
wait, what do you mean "weird" ?
lastly, we were talking about the bad alignment of the locked icon....
from bootmetro.
GIANTCRAB
commented on July 19, 2024
see comment #51 (comment)
You could also try viewing it on IE or Firefox to see how it looks like
from bootmetro.
aozora
commented on July 19, 2024
ok, sorry, this issue became so long with more collateral issues.
It is needed to re-export the icomoon font using PUA (Private Use Area) encoding.
I'll give this maximum priority.
from bootmetro.
aozora
commented on July 19, 2024
I'm testing an IcoMoon icon set generated with PUA in the new branch "1.0.0-wip-icomoon-pua". There's a small issue regarding icon alignment in win-command classes, but if you want please try it just to test if you still have to view all icons.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
The mouse on Opera looks incorrect.
The arrow signs are inside the panorma slider.
I've uploaded the latest version to https://www.giantcrabby.com/bootmetro/bootmetro-1.0.0-wip-icomoon-pua/hub.html for easy testing.
The documentation would require some updating though, thanks for the fix. Looks fine on Firefox, I'm not really sure about IE though.
from bootmetro.
aozora
commented on July 19, 2024
yes, the panorama will be rewrite, and so all the docs page. My concern in this branch was only to be sure that there will not be problems anymore with the icomoon font.
thanks for testing.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Hi,
there's an issue with this build, I just found out that if I include the entire URL, the icons become crazy.
For example:
I have two websites www.blahblah.com and blog.blahblah.com
If I put the style sheet rel="/content/bootmetro.css" in my www.blahblah.com, the icons display fine.
but if I put rel="http://www.blahblah.com/content/bootmetro.css" in my blog.blahblah.com, the icons become crazy.
from bootmetro.
aozora
commented on July 19, 2024
Hi,
What do you mean by "crazy" ? please send some screenshots...or explain better the beahviour.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
from bootmetro.
aozora
commented on July 19, 2024
Hi,
that is because I needed to regenerate the icomoon font using the icomoon online app, however it was not possible to maintain the same mapping of icon classes: the old icomoons font used in bootmetro was generated with an early version of the icomoon app that not included the medatadata about class names, so regenerating a new one screwed up all names (not all, but many).
Important: you should not use anymore the icon code like  in your HTML, but ALWAYS use the icon-* class name.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
I /am/ using only icon-* classes.
I still don't get what you mean. :/
And I don't think you get what I am trying to say.
This works fine.
`
This makes icon look the same as before, ugly, weird, distorted looking.
`
`Allow me to further explain:
On my first website - www.lol.com, I have uploaded the bootmetro files into that website.
I use this code <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons.css" /> in my <head> to design my HTML web pages on www.lol.com.
On my second website - www.notlol.com, I did not upload the bootmetro files into that website.
I want to use the same files located on www.lol.com.
I use this code <link rel="stylesheet" type="text/css" href="http://www.lol.com/content/css/bootmetro-icons.css" /> in my <head> to design my HTML web pages on www.notlol.com
Both websites uses icon-* classes.
Result:
www.lol.com loads with normal looking icons.
www.notlol.com loads with the previous ugly looking "icons".
from bootmetro.
aozora
commented on July 19, 2024
urls don't work, and some code is missing in your previous post
from bootmetro.
GIANTCRAB
commented on July 19, 2024
urls don't work
So they are not suppose to work?
So people who wants to use CDN cannot use this bootmetro theme in their CDN?
from bootmetro.
aozora
commented on July 19, 2024
no I didn't meant that.
I can't reach www.notlol.com , and www.lol.com seems to be a normal bootstrap site.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Here's the demo:
This one is using <link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons.css" /> in the head - https://www.giantcrabby.com/bootmetro/bootmetro-1.0.0-wip-icomoon-pua/icons.html
This one is using <link rel="stylesheet" type="text/css" href="https://www.giantcrabby.com/bootmetro/bootmetro-1.0.0-wip-icomoon-pua/content/css/bootmetro-icons.css" /> in the head - http://labs.giantcrabby.com/bootmetro/icons.html
Test it out in Firefox or IE to see the difference.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Any update on the fix?
from bootmetro.
aozora
commented on July 19, 2024
Hi see both pages are the same...with Chrome, IE & Firefox...Sorry, but I don't see any problem...
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Hi,
I've figured out that it is actually because of CDN which made it distorted.
Please try again now, I've used CDN now - http://labs.giantcrabby.com/bootmetro/icons.html
Does this mean that Bootmetro cannot be hosted on CDN?
from bootmetro.
aozora
commented on July 19, 2024
again, I see no differences.
Obviously BootMetro can be hosted in CDN like any other.
Maybe is your line to have problems.
from bootmetro.
GIANTCRAB
commented on July 19, 2024
Never mind, I figured out that I should have done this.
Sorry for the inconvenience caused.
from bootmetro.
Related Issues (20)
- Your online demo links are broken HOT 2
- PIVOT - Documentation is not correct. HOT 1
- Icons are not showing proper items HOT 2
- Suggestion: create a css definition like "class="bs-docs-section-header""
- Win-Commands labels with IE9
- Is the project cloased? HOT 2
- bootmetro HOT 4
- boot metro-master HOT 1
- Add support for pivot item change
- Some demo page links are dead (in the official site)
- bootmetro in a real project HOT 2
- RTL
- Scrolling in the Hub (panorama) takes long time to respond
- Charms Not Working
- Dead links in "Wikipedia Featured" dropdown HOT 2
- Modal box validation error
- does this support live tile? HOT 1
- Vertical scrolling panorama
- Missing Base Template
- How Can I center Tiles?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootmetro.