I am trying to put some font awesome icons on my site. But google chrome doesn't show icons of fontawesome.com
I have tested with other browsers, it works fine.
I have imported the link of fontawsome CDN in the head tag.
I have also put the tag of icons to show.
There's no adblocker and any extension that blocks icons.
I have tested with chromium browser, same problem with that browser.
I haven't used any extension for chromium.
Note: I am on the latest version of the Chrome browser and also imported the latest version of fontawesome.com
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Font. version: 5.8.2
P.S.: It's working fine on another laptop of my friend, but not working in my mine. Please figure out the problem.
link
Here's the link of jsfiddle for code:
<!-- Font awesome 4 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- The code for icon -->
<div class="icon-container">
<i class="icon far fa-gem"></i>
</div>
Please check the screenshots:
I'm using the same version of Chrome and that fiddle displays as expected (far-gem is shown). So I don't think it is a FA-issue or a Chrome-issue. Possibly some addins are causing trouble.
I had the same issue with icons not appearing on Google chrome on my mobile phone but worked fine on my laptop.
I solved the problem by clearing my browser cache. Have you tried this?
I don't know why my browser cache prevented icons from loading or if that could also be a problem for any of my site's visitors - if anyone can explain this, or has a way to ensure this issue doesn't affect my site's visitors, that would be really helpful.
Related
Currently my website favicon only works in Firefox. It does not show in Chrome, IE or Edge. In chrome it only shows a globe.
My site is http://www.photogrfr.com
Here is my code that I setup:
<link rel="shortcut icon" href="{{ 'favicon-144x144.png' | asset_url }}">
What is weird is that it's working on all browsers just fine on a new page that I recently built found here: https://www.photogrfr.com/pages/learn-more
But not on any other pages on my domain.
I have tried clearing cache in the Chrome settings, using a pc/browser that I have never used before.
I have also tried using a 16x16 PNG and ICO file.
Nothing seems to be working. The code in the learn-more page that I built is the same in my Shopify theme.liquid as well.
Any help is greatly appreciated.
I got it solved by adding the code to the top of the section. Even though it was between the tags, for some reason putting it as the first line fixed it.
I am having an issue with Font awesome icons and it's iE support.
It is working perfectly fine on all other browsers.
But for some reason on iE or Edge, the icon doesn't appear, There is a space of where it would go, yet there is no icon.
I noticed a difference in the styling when looking at the Dev tools in Chrome vs iE (iE10 to Edge).
The Internet options has download fonts enabled.
I have added the meta tag to the top of my <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I included the entire font awesome zip (even though i dont need less or scss folders)
I am using Font-awesome v4.6.3
and Bootstrap v3.3.7
please see image below to see differences in developer tools:
iE-DeveloperTools:
Chrome-DeveloperTools:
Other than that, I don't see any differences between the two.
Seems like it may be a Browserstack issue. I was using Broswerstack to test on different browsers and it seems to be having an issue with local Font awesome files, yet works with CDN.
I checked the path multiple times and it works on all browsers i am able to test on through my Mac. Guess im buying a PC too.
See comments above for details.
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 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
I have a website. It uses 2 Google webfonts for its headings and body text. These work fine on Chrome/IE/Safari (including mobile) but when I view the site on my office computer running IE9 on Win7 the Google fonts do not load and fall back to a sans-serif.
Here is what I see:
IE9:
Chrome:
I cannot figure out why IE fails to load the font as I am aware that Google font's are compatible with IE7+. I figure it might be a security setting but can't get to the bottom of it. Any ideas.
I don't know if this is the issue, but try changing your request to only one link tag:
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato' rel='stylesheet' type='text/css'>
Perhaps loading two fonts in two different requests causes issues.
On my IE9 it looked the same as in Chrome. Press F12 and make sure you are using proper Browser and Document Mode.