My Chrome (v53.0.2785.116) doesn't load material design icon font regardless of anything i've tried so far (turning off extensions, clear cache etc).
Anyone solved this yet?
Asked this question on Google forum and I've managed to solve this. There's this plugin in Sketch (i am not 100% sure if it is this one but I'll correct it when i double check it later) breaks it: https://github.com/keremciu/sketch-iconfont
Everything works fine after i removed it.
Refer here: https://productforums.google.com/forum/#!topic/chrome/kZToEg0WqTU
Related
I find a lot questions about Problems with not displayed Icons of Awesome font. But they didn't match my specific Problem.
I try to implement in my website a project from heise.de, called Shariff. Shariff enables website users to share their favorite content in social networtks without compromising their privacy. To realize this not the common Share- or Like-Buttons of Facebook, Twitter etc. are used.
In this project Awesome font is used for example to show the known symbols of Facebook, Twitter etc. near the share-buttons. The Awesome-font is implemented in the file shariff.css by #font-face. I have downloaded the font v=4.6.3 and have installed it on my webspace.
When viewing my demo-site with iPhone/iPad (Safari) or Chrome, I can see the symbols of Facebook, Twitter, LinkedIn, etc. But in IE11 not. To check out if my CSS has some bugs I replaced for example the twitter-symbol by an normal charakcter::
Instead of:
.fa-twitter:before{content:"\f099"}
I used:
.fa-twitter:before{content:"tw"}.
This is working in IE11 and I saw 'tw' before the tweet-button.
I searched the web in the last few days to find a solution for this problem in IE11, but can't find anything that works.
I guess there must be something wrong in the shariff.css where I implement Awesome font via #font-face, but I can't find the bug. So I hope someone here can help. Please be lenient with me if its just something like a missing space, bracket, etc. I'm blind and have to read the CSS-file with an voice-synth, that is in this case a bit difficult.
You will find my test-site and the CSS here:
http://www.sensitive-tiertherapie.de/test/index.htm
http://www.sensitive-tiertherapie.de/test/css/shariff.css
Unfortunately this website is in German, but if you scroll down to the bottom of that site you can see the share-buttons.
I would appreciate if someone could find-out, why it doesn't work as it should.
BTW: I hope my question will be displayed ok, because the handling of this site by screenreader isn't very smooth.
Kind regards, Michael
Many thanks for your feedback, I get the solution:
It was a local accessibility setting of IE11 in:
Extras -> Options -> General -> Accessibility
Here was "ignore fonts on Website" selected. After I turned off this setting, the icons of Awesome-font appears as expected.
So if anyone get into the same trouble, check
1. compatibility mode of IE11 and
2. accessibility settings.
This question was already asked before, nevertheless the solution that was suggested didn't solved the problem.
I am trying to include the ResearchGate academicon in my website, nevertheless it is displayed as a square in Google Chrome and as square with numbers inside in Firefox, while loading the website from the server.
If I download all the files to my computer (as a zip and then opening directly the html file) it displays correctly.
The previous question that was asked with the exactly same problem (and overall situation, it actually uses the same template for the website as I do) is here with its discussion is here Font-awesome: An emoticon looks different on my computer than on the actual webpage
I already tried doing the suggested modifications in the .htaccess file without success. Does anyone of you have an idea on how to attack this problem?
Many thanks!
Edit 1:
I include here the mime types reported by my CPanel:
Mime Types in CPanel
Edit 2:
Sorry, I don't have enough reputation to post the pictures, but they are identical to the quoted previous Question (linked: Font-awesone: An emoticon looks...).
Is it even in the correct size (maybe it is very small)? When not: Check font-awesome.com .. it has set some classes with allows you to size your icons. Try this class on your html in the <i> tag: fa-x3
I´ve made the same on this page in the footer.
Don't kill me if I am totally wrong for what you are searching.
This question doesn't deal too much with coding itself, but if there's a fix for it in any way, do let me know. I've searched around for a while looking for an answer, as I've had this issue for a long time. Can anyone explain why this text in Chrome looks so terrible? This is just an example of some buttons on this website: bad text image
Each individual letter looks like it's a different size from the previous one, and nothing is smooth. It looks jagged and terrible. I've tried toggling on and off DirectWrite, but that hasn't changed anything. The text is like this on every site, not just StackOverflow of course. I hope this isn't how it's supposed to look...anyone?
Have you tried setting the font for Chrome?
chrome://settings/ > show advanced settings >web content > customize fonts...
Actually, there are a number of different fixes people have found helpful for this.
For one WordPress site I run, the problem was solved by loading a set of font files to our site and implementing #FontFace differently (some additional browser-specific settings and getting the sequence of those correct). This resolved the issue for all users without the need for any local changes to OS or Browser. Other folks have had success with a other CSS formatting settings.
Localised fixes include changing Chrome browser settings, and changing settings in Windows. Like the OP, I didn't find these helpful but others apparently have.
Edit - These Stack posts host a good discussion of the various options people have found helpful:
https://superuser.com/questions/308135/how-can-i-improve-font-appearance-in-google-chrome
Jagged and choppy Google webfonts in Chrome and Firefox on Windows
PS - #user2864740 In my opinion, the various CSS suggestions (#FontFace, -webkit-text-stroke: 0.25px, etc) do constitute a coding fix.
OSX 10.8.5
I have images on my site hosted on my own server (not hotlinked) that aren't appearing in Firefox (26.0). It's just empty space where the image should be.
Troubleshooting with Firebug, I found that the image urls are different than what they're supposed to be. Instead of just src="img/Pic1.gif" it's something like src="http://website.net/img/xPic1.gif.pagespeed.ic.A2br4BiDEK.png". This has to be the reason the images aren't appearing, no?
I looked up what PageSpeed is, but I've never used it before. I guess I should disable it, but as you can see on the page I linked that it requires knowledge of apache? I have zero knowledge of that and would like to avoid it for the time being if possible.
Does PageSpeed just come as a part of Firebug? I disabled Firebug and refreshed which did not bring the images back. Will other visitors to my site not see the images on Firefox as well? If so, how can I possibly solve this?
edit
I'm also using Google Analytics, in case that is relevant..
Pagespeed is not the reason for the disappearance of my images, so although I didn't solve my problem, I'm closing this question as the title is no longer relevant.
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)