I have researched all day but can't find an answer as to why my ionicons fail to display in IE and Firefox but successfully display in chrome.
My site is built in Bootstrap 3 and the Ionicon CSS is called in the header after the other CSS files.
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css"></link>
When I launch the site in IE (all versions) and Firefox (all versions) the Ionicons are displayed as small rectangles with two rows and two characters each.
If you're using Firefox you can see the error here in the Team section where the social Ionicons should be.
Does anyone have any idea what is causing this? I have tried a few solutions from this site with no success.
Looks like you haven't installed them correctly, follow steps below.
Download and extract the font pack
Copy the ionicons.css to your project
Copy the fonts folder to your project
Ensure the font urls within ionicons.css properly reference the
fonts path within your project.
Include a reference to the ionicons.css file from every webpage you
need to use it.
Taken from here, this should sort out your problem!
Related
My website http://goesllc.com is using wordpress and the theme I have installed already included font awesome icons. I created a custom set and added them to my theme. They were all working fine, but the custom ones I added randomly stopped showing up in Chrome, IE, and Firefox.
The icons still show perfectly in Safari, Opera, and my mobile android browser.
If you go to the site in Chrome and look below the slider on the homepage you can see where there are supposed to be icons, but instead it just shows letters. There are 3 icons that are supposed to be on that page, but instead they show the letters, "a", "e", and "d". If i were to switch to the fontawesome icons the theme had pre-installed they show up fine.
However, in Safari or Opera the icons shows perfectly as intended. I've contacted my theme's author and have been searching around for a fix, but to no avail.
Anybody have any idea why the icons stopped showing up in certain browsers?
Thanks.
This is a common problem with serving up web fonts from other servers. In your case, the goes-font is being served up from http://goesassets.com which is a different domain, and is being blocked by a cross-origin policy.
Either move those fonts into a directory on the http://goesllc.com server and load them from there, or set up a CORS policy on http://goesassets.com to serve them up.
There are plenty of articles online to set up CORS policies via apache configuration files, .htaccess, etc if you go that route.
I have a problem using the Bootstrap 3.1.1 Glyphicons.
In Google Chrome, the Icons are working fine.
But in Firefox, some icons are displayed, some are not.
For example:
<span class="glyphicon glyphicon-log-in"></span>
Should display the "log-in" glyphicon.
In Chrome the Icon is displayed, in Firefox it is not.
<span class="glyphicon glyphicon-folder-open"></span>
Should display the "folder-open" glyphicon.
In Chrome the Icon is displayed, in Firefox it is displayed, too
Google told me, that Firefox might have a problem with importing the font files from a different server, but I have them located on my web server. Since some Icons are displayed in Firefox and some not, I don't think the Problem is within file access troubles.
The funny thing is, then I visit the Bootstrap Components Website, EVERY glyphicon (even the ones, my Firefox won't display on my website) are displayed correctly by Firefox.
Since the glyphicons on the Bootstrap Components Website work fine in Firefox, I compared the MD5sums of the files used on the Bootstrap Components Website and the Files I received via the bower download of Bootstrap. The checksums are equal, so I think I don't have corrupted files.
Any ideas?
UPDATE:
OS => OpenSuSe
But I found the problem:
After deleting the fonts from my server, they there somehow still displayed on the website.
Chrome Console and Firebug did not tell me where they come from, but a network sniffer showed me, that I somewhere include a CSS from a foreign server.
After a search over my project, I found this CSS import in a third party bootstrap add-on.
Deleted the line and now my local fonts are used, and all the icons are displayed correctly.
Sorry for bothering you, should have had the idea to check a network sniffer for possible includes called from third party extension earlier.
I'm creating a local HTML UI font icons from bootstrap don't load in Firefox, they do in Chrome and IE.
Not working/does not apply:
https://superuser.com/questions/446001/firefox-cannot-render-icons-from-font-awesome-webfont-set
glyphicons are not loading
Bootstrap 3 cdn glyphicons not loading in firefox only
Glyphicons from bootstrap 3 not rendering on Firefox
https://github.com/MaxCDN/bootstrap-cdn/issues/196
The problem is apparently https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS
What works for me is:
"If you have a page at file:////pages/mypage.html, then you can only load fonts located in file:////pages or below. So, for example, if the fonts are in file:////fonts, they won't load, but if they are in file:///pages/fonts, then they should work. At least, that's how it seems to work for me."
posted by freixas #
https://support.mozilla.org/en-US/questions/956597
So basically I put my resources dir (contains scripts, images etc) in the root directory where I have the web pages.
I've been struggling for hours now, to figure out why font-awesome isn't functioning properly. I used the Font Awesome Wordpress plug-in. It works for the majority of the browsers, however Firefox is showing only a few characters.
It's the magenta menu on this website: http://www.babystuf.nl. (the blocks in the left sidebar) I tried everything (updates to Font awesome 4.X without the plugin, added .htacess in the /font folder, changed the .. /fonts/ path to a static path). Without succes.
Weirdest thing is, that we run a copy of that same website (http://www.baby-wereld.nl) and it's working fine there! Different server, same WP version, however with less plugins than babystuf.nl.
Who has an idea on how to fix this?
Thanks! M
UPDATE: It turned out that we used the All In One Event Wordpress plug-in, that uses Font Awesome as well… And that's a older version than 3.2.1. Only Firefox loaded that font set…
I had this problem. I thought I had tried EVERYTHING (htaccess, changing file paths, playing with permission, etc) but it turned out I had previously tried to use a Font Awesome plugin in my wordpress installation and Firefox was picking up this older version of FontAwesome. Disabling the plugin let the browser look for the files I had uploaded myself and the problem is now solved!
I'm trying to get FontAwesome to work on my site without Bootstrap. I've downloaded the font files and the CSS files bundled with them, and have changed the CSS file so that it points to the fonts on my server.
In the web inspectors of Chrome, Safari, and Firefox, I get no missing resource errors, and the links to both the CSS file and the fonts aren't broken.
The HTML I'm trying is
<i class="icon-cheveron-right"></i>Next
"Next" appears fine, but without so much as a blank space or offset for the icon. I've checked and double-checked the instructions on the FontAwesome site, but can't get the icons to display at all.
What am I missing here?
this worked for me. your code has an extra 'e' in chevron
<i class="icon-chevron-right"></i>Next