I stumbled across an issue with Bootstrap Glyphicons not working with Firefox but working with other browsers faultlessly.
Q:How to make Glyphicons from Bootstrap 3.1.1 work with firefox?
(I answered this myself and this was part of the original post)
When i sought information as to what might be causing this issue there are only a few articles that did not solve my issue focusing mainly on older versions and not explaining the required fix.
I then after some time worked out that by solely removing the 'www' from the <link href='www.domain.co.uk'> to the bootstrap.css the glyphicons began working within Firefox as well.
This appears to be due to the following error:
Cross-Origin Request Blocked:
I thought perhaps this worth sharing as seems there has been a fair number of people with similar issues as myself without there being any articles covering this method of fix.
Change
<link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">
to
This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">
The issue is the following error:
Cross-Origin Request Blocked:
I fixed this by removing the www from the <link href='http://www.domain.co.uk'>
Change <link href="http://www.domain.co.uk/css/bootstrap.css" rel="stylesheet">
to
This <link href="http://domain.co.uk/css/bootstrap.css" rel="stylesheet">
This allows the Glyphicons to work on all browsers including firefox.
#Damathryx solution for this issue is the real solution for working locally:
This only happens when you work locally and not from files on a
server. You have to change a setting in Firefox to display the
glyphicons when you develop locally.
-open about:config in your address in Firefox
-Then search for security.fileuri.strict_origin_policy property and change it from "true" to "false".
Related
I am working on building a website using GitHub Pages and am having a bit of trouble getting the favicon to display properly. My understanding is that, due to compatibility concerns, you need to add various custom bits of code to make sure that your favicon displays correctly across different browsers.
I am currently using Safari 14.0.3 and Google Chrome to test this.
I have included the following HTML code to display my favicon:
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
The only problem with this is that it is not displaying on the tab bar in Safari. It correctly displays on Google Chrome and in the search bar at the top of Safari, but not in the tab bar. I have included images below for reference:
Where it is showing correctly in Safari:
Where it is not showing in Safari:
Note: I am trying to get the globe favicon to display.
I have read some similar questions that have talked about clearing cache etc., but none of these seem to have worked.
What I have tried so far:
Clearing all of my Safari Cache (clearing all of the history)
Emptying all of the Cache
Deleting all of the files in the Safari Favicon Cache folder on my Mac
When I did two, and then initially launched Safari, the correct favicon briefly displayed in the tab bar before switching back to the other one.
I am a little bit unsure of what to do here. Does anyone have any ideas? Do I need to add additional code? Any links to any examples or resources would be greatly appreciated. Also, as a side note, are there any links to documentation where I can read further about what all of the different rel="" do here?
Thanks.
you can try use this tool:
https://realfavicongenerator.net/
it's worked for me
I figured it out -
There are two different lines of HTML code required to make favicons display on Safari properly. Changing the line:
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
will make the favicon display in the top search bar on Safari as well as on Google Chrome.
The favicon displayed on a Safari tab is managed differently. This requires the use of HTML code for the Apple mask-icon for Safari Pinned Tabs. Consequently, this requires the editing the following code below:
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
Editing this line will allow for the favicon to be displayed on the Safari tab.
Note: Both lines are necessary for the favicon to display in both the Safari search bar and the Safari tabs.
First, check that there aren’t any other web pages on your site that are setting the favicon. If there aren’t it is just a little safari bug.
I have had a similar issue and it seems that safari will hold onto the favicon for extended periods of time even if the code is changed. Unfortunately, you may just have to wait.
For me, the problem was that Safari doesn't support SVG. I should have known not to trust W3schools when it said that Safari supports it (I've submitted a page correction). Based on https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 which I found via https://caniuse.com/link-icon-svg, the correct method for having an SVG icon (in supported browsers) while still supporting old Safari users appears to be:
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Unless you've already got an .ico file, in that case you might as well use that file instead of a PNG. Note that you must now use sizes=any to trick Chrome into doing the right thing and using the SVG which it supports.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.
The site is https://avonctnhs.org
Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.
Thank you so very much.
Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.
Additionally, all the code that should be needed should be visible with a nice quick inspect element.
Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.
Your source code has the following lines which should be replaced.
<!-- Additional Headers -->
<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">
The above lines can be replaced with the below code which is actually the contents of the above two files.
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
I've downloaded font-awesome icons in my project and imported font-awesome.min.css as
<link rel="stylesheet" href="resources/font-awesome/css/font-awesome.min.css">
And used them simply like
<i class="fa fa-user-o" aria-hidden="true"></i>
The stylesheet was loaded so there was no problem with the path.
The icons worked fine in Firefox, but didn't show up in Chrome 61 at all, neither in Win 10 nor Linux, so I guess it has nothing to do with OS.
I don't have any plugin in Chrome that would be conflicting.
I've also tried <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> but nothing changed.
Does anyone know what might cause this problem? Thanks!
I'm having this exact same issue. I tried re-downloading the fonts and the css, rewriting my css into a new file, removing some of the scripts and tags in the head tag and nothing works. It seems to be related to Chrome 61. I was going to report this to the FA's github, but it looks like someone already did.
Forgot to mention, I'm using Polymer. And here is a solution I found.
install polymer-font-awesome with npm:
npm i polymer-font-awesome
add the following dependency to polymer.json:
"extraDependencies": ["node_modules/polymer-font-awesome/dist/fonts/*"]
import these two files:
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-face.html">
<link rel="import" href="node_modules/polymer-font-awesome/dist/font-awesome.html">
include stlye module:
<style type="text/css" include="font-awesome"></style>
Clear the cache in Chrome and it worked for me.
If you have any kind of AdBlock turned on, you need to disable it first.
I also have the same problem that font-awesome icons appear in Firefox but not in Chrome, and I figured out that my Chrome AdBlock blocked it.
I'm trying to use a Google font on my website in different weights. Here's the code I'm using:
<link href="//fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
Everything works fine in Chrome and Safari. But in IE, everything looks bold, no matter what font-weight I set an element to have.
I have found one work around. If I load each font-weight individually (with the code below), everything works in IE.
<link href="//fonts.googleapis.com/css?family=Roboto:100" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet">
That works, but it's inefficient. Anyone have a better solution?
Thanks!
Try putting the proper google fonts suggested line:
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' rel='stylesheet' type='text/css'>
Or put the fonts into your css file:
#import url(https://fonts.googleapis.com/css?family=Roboto:100,300,500);
Don't know what else could help, sorry.
It turns out the issue was that IE was set to load intranet sites in compatibility mode. Since the dev environment is on the local network (and thus an intranet site), IE was switching into compatibility mode without my knowledge. Turning that setting off fixed the issue
This is one of the strangest things I have ever seen. In the HTML file I have this link tag -
<link rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/custom.PAGE_010100027.css">
The CSS is properly loaded and interpreted in all browsers save for IE10. I added the type="text/css" attribute in case the MIME type was somehow wrong -
<link type="text/css" rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/custom.PAGE_010100027.css">
Still no dice.
So I copied the file and renamed it wtf.css (just for giggles) and changed the link tag to -
<link rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/wtf.css">
It loads and interprets perfectly in IE10. :-/
We can name the file anything we want other than *custom.PAGE_010100027.css* and it will load fine in IE10. Even just changing one number. Does anyone have an idea why this isn't working? I'm stumped and I cannot find anything on the web concerning the naming of CSS files for IE10 and the other couple of hundred CSS files in this project using this naming convention load and interpret just fine. Thanks for any insight!
UPDATE I have confirmed that it is an odd caching issue of some sort. Whenever cache-busting techniques are applied the CSS file is loaded and interpreted correctly. Removing the cache-busting techniques causes IE10 to revert to a much older stylesheet. This only occurs on this one page (out of a couple of hundred).
In reading about related IE10 issues it could be related to the OS (Win8 versus Win7) and this setting: "Use TLS 1.0" (unchecking may solve the issue).