I have a rails 4 app.
My font awesome icons have worked until recently. Now, instead of my social media icons, i have black squares (I can't see why those have replaced the coloured icons I've been using). The links work. The tags are the same as they always have been and the same as the font awesome directions.
I installed font awesome using the sass gem. I require font-awesome, just above self in my application.css.scss.
I have the current gem installed (4.2.0).
For what it's worth - this is my footer with the links I'm using:
<i class="fa fa-youtube fa-2x"></i>
Any advice?
Thank you
You can use Chrome developer tools, firebug or any similar type of tools to check a few things. Firstly you want to make sure the font has downloaded. Using the network tab of Chrome developer tools, you can see outgoing requests and the responses that were made in order to serve the page. Check to see if a request was made for the font file.
Two possible scenarios are the
No request was made for the font. This would indicate a problem with your font declarations in the #media query of your CSS file.
A request was made for the font but it returned an error code.
If an error code is returned you need to determine why that is the case. For example a 404 indicates that the server could not locate the requested file in the specified location, so obviously you need to check that the file is there. Another thing to check is that the web server is configured to respond correctly to requests for fonts by serving the files. I have come across cases where 404 errors are thrown because the web server does not serve, or is explicitly disallowing requests for .woff files, which makes the 404 error somewhat misleading.
If the request for the font files is being made and the server is responding with a success code (200, 302 etc), then it may be a problem with the styling of your HTML element.
Using the tools mentioned above you can also 'Inspect' the HTML element, generally by right clicking on it and selecting a menu option along those lines (In chrome it is 'Inspect Element'). You should be able to see a rundown of each element and where the styles are coming from similar to this image.
There you should be able to find out if something is overriding your styles.
Related
Trying to help troubleshoot an issue with a charity's web site and it appears that the site's CSS is only partially loading when viewed on Safari. A short link to the site is http://bit.ly/1znipeN
I've used the W3C CSS validator on the child theme CSS and it validated ok, less a couple of warnings. The odd thing is that the site appeared to be working fine until today. I wonder whether it could be a temporary issue in a 3rd party resource, such as JSQuery or similar that is causing Safari not to render correctly? It works fine in Chrome for example.
Is there any way of debugging it to try and find the cause?
If you haven't done so yet clear cache in Safari and Chrome and reload to check if the error is possibly now gone or visible in multiple browsers.
If you are using versioning such as git:
Undo all changes that have been made today (and maybe also yesterday) and test again. If the site works now on Safari, take the changes back in one by one and test which one breaks the layout.
If you use a preprocessor such as Sass, compare the size of yesterday's CSS file to the current one. If it is smaller there might be an error in rendering the file.
Hope one of these helps.
Ah interesting, so these lines we added to .htaccess were the cause for the site not to render correctly in Safari, Firefox and a few others (worked fine in Chrome).
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
My Ruby on Rails app hates custom fonts and I don't know why. Here are some of the errors and troubleshooting that I have gone through.
First, there were devastating display errors that only happened on Google Chrome on a PC. The text will overlap, paragraphs within the same div will have different widths, buttons will have shortened width, a copy will shift to the right on the page...to the point where some of the sites are unusable. I finally figured out that the browser seemed to not be understanding the font correctly. If I used websafe fonts like Arial and Georgia, the issues went away. So I thought that maybe the #font-face fonts that live on my server were corrupt. The Chrome issue also only appeared to happen on later versions of Chrome (20 and up). The weirdest part about this is that it only happens intermittently. Sometimes the page displays fine and sometimes it looks crazy. This has occurred on multiple computers and cache clearing does not seem to affect the error.
I then integrated Typekit from Adobe to serve the fonts instead from their server. Now the display errors are gone, but all Windows browsers ignore the typekit font and display the fallback fonts instead. That's IE, Firefox, and Chrome on Windows, various versions.
The site is part Ruby on Rails, part PHP (WordPress), and these issues only happen on the Ruby on Rails pages. The font files that I thought were corrupt are the same font files that work beautifully on the PHP side of the site.
Here are some screenshots of the initial Chrome issue with the server hosted fonts.
The site currently has the server hosted fonts live (with the Chrome error). A page on the site where this is happening: http://levoleague.com/jobs
Any ideas on why my app rejects fonts?
Looks like it's a CSS issue and you need overflow-wrap: break-word;
I've just added imageresizer to my MVC4 app, but for an image tag as below, it does no resizing. If I paste the url directly into my browser, it gets resized.
<img class="store-display-image" src="/Images/ToughBook.jpg?width=130">
Why is this? I suspect routing is messing imageresizer around, but I installed the routing shim as instructed. The diagnostic url, /resizer.debug.ashx, only warns me I have NoCache set.
As the same HTTP request occurs both ways (except for the Referer header, which is irrelevant here), it's impossible for your statement to be true.
One of the following must be happening:
Your 'store-display-image' css class contains client-size width/height settings that are overriding the true size of the image.
Neither image is being resized (perhaps you're running IIS6 or IIS7 Classic - see the docs for supporting that), but your browser is automatically resizing the 'address bar' version to fit inside the window.
Your page has a 'base' tag that is changing the 'src' value.
You're just making a typo somewhere.
To avoid downvotes on future questions, I suggest providing more detailed information, such as the exact URL you used in the address bar, the css for 'store-display-image', the document URL containing the img tag, your server details, and a copy of your diagnostics page.
I also suggest showing effort to simplify the circumstances, such as trying an empty HTML page and simple element with no CSS applied, and (for strange situations like this), screenshots of both situations.
I'm looking for a Chrome or Firefox extension that will auto validate your webpages from specific URLs.
I don't want to auto-check everything I browse, only the specified URL patters or domain names.
The validation doesn't have to be perfect, but has to be pretty fast and find things like
missing images, css or js files.
JavaScript warnings/errors.
invalid links (404 ones)
I'm Using sIFR 3r436, and although I believe everything is set up correctly, and my console shows that the .swf font file is loading correctly, the HTML type is hidden but the sIFR type is not displaying. Below is a link to the site in question:
Schaffer's Website
Below is a link to a test site that uses exactly the same sifr-config.js, sifr.js, css, and swf files. And it works. The main difference between the two is the server that they are running on.
Schaffer's Test Site
I'm hoping that maybe somebody can see a problem that I'm unable to. Appreciate the help!
The server gives a 403 forbidden for the Flash movie – in other words, it does not load.