I'm trying to use Font-Awesome 4.2.0, I can see the css is loaded, but the fonts are not. I'm am using Chrome, but have the same issue in FF and IE too.
I've created a stripped down version to demostrate this:
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
Remove It - <i class="fa-remove"></i>
</body>
</html>
http://plnkr.co/edit/eF6tPerRYOZHAdzzkdyk?p=preview
Obviously, I'd like to know how to solve this, but more importantly, I'd like to know how I can track down font problems better in the future. Using the Chrome dev tools, I can see that the font is not loaded, but I don't see why.
Try:
<i class="fa fa-remove"></i>
Related
I am trying to get a spinner icon to spin with no success. I have downloaded the latest font awesome and created a very basic html file to try and eliminate any variables to make it work.
Here is the html:
<!doctype html>
<html lang="en">
<head>
<link href="C:/Users/<my-user-name>/Downloads/fontawesome-free-6.2.0-web/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col">
<i class="fa-solid fa-spinner fa-spin"></i>
</div>
</div>
</body>
</html>
The above code renders the icon but the animation doesn't work.
The only thing I have noticed is that when I inspect the icon element in chrome and look at the style details for .fa-spin, it shows a style called animation-timing-function: var(--fa-animation-timing, linear); but when I hover over that style, text appears stating "--fa-animation-timing is not defined".
As far as I can tell from the fontawesome host yourself instructions I have included everything I need. I didn't delete any files from the extracted free font awesome download. I also tried the alternative option to referencing all.css, which involves referencing fontawesome.css, brands.css and solid.css.
What am I missing here?
Thanks so much in advance!
We just ran into this issue and found the potential reason.
https://fontawesome.com/docs/web/troubleshoot/
Points to https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-reduced-motion#user_preferences
And when we toggled "Show animations in Windows." The animations started working again.
I am trying to use netdna.bootstrapcdn.com. It's working perfectly in Firefox and Chrome but not loading in IE - 11 or Edge.
Importing the CSS library like this:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
The error is throwing in browser console is :
Even tried copy/download CSS texts and paste in a custom file and importing the same file then it breaking in all browsers.
You are getting this error due to bad URL reference. In the example below, the href attribute of the Font-Awesome library has been edited.
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<i class="fa fa-adjust" aria-hidden="true"></i>
I don't know exactly how you are setting things up - for example when you did the test 'direct' and got the error on all browsers whether you have a doctype, that sort of thing.
However, the basic problem seems to be in the URL syntax. With only // at the start Edge (on my Windows 10 system at least) failed to find the file - after a reasonable pause. Adding the https: Edge was happy and found the file.
This snippet seems to work fine:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
Why are these useful gliphicons pixelated, even on W3Schools own website? I am trying to use these and have the same issues. See glyphicon-search as an example.
I have tried rotating, antialiasing, etc. Nothing works.
If it displays like this on W3Schools own website - is that a "feature"? Should I be using some other small icons? Here is an example - the right one is a real problem:
There is nothing to do with this w3cschool glypican:
Some another issues are also be there for this problem, like,
Use Proper CDN instead of using local file (js or css)
Wrong Loading of glyphican as #Deathstorm explain the second point in his answer.
You can see this demo which I have copied from w3cschool itself and it's supported in most of the browser:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Music Glyph</h2>
<p>Music icon: <span class="glyphicon glyphicon-music"></span></p>
<p>Music icon as a link:
<a href="#">
<span class="glyphicon glyphicon-music"></span>
</a>
</p>
<p>Music icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-music"></span> Music
</button>
</p>
<p>Music icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-music"></span> Music
</a>
</p>
</div>
</body>
</html>
Why are W3Schools glyphicons pixelated?
It has nothing to do with W3Schools and the title should change (I think). Use your developer tools to see that the provided link downloads sources from a CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2
and not from W3Schools.
So, any comments like: glyphicons from w3schools are terrible. Or at least more pixelated than others... are terribly wrong and misleading. As others have mentioned, maybe there is something else that causes this (graphics card driver, browser settings, monitor settings). Have you checked different devices?
With my PC, I also see difference between Firefox and Chrome. The result of Chrome looks smoother:
also: Vector Icons Roundup | A side-by-side comparison between popular icon fonts
as more people told already, the glyphicons from w3schools are terrible. Or atleast more pixelated then others.
Some problems that could let this problem occur are:
The browser version and/or cache
Wrong loading of the glyphicons. You can check this by viewing the console in your browser.
A bad source from wich the glyphicons are taken from.
The source i've always used and didn't have any problems with is the glyphicons from bootstrap You can use these glyphicons by adding the following code to your header:
<!-- Fonts and Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Note: By now there maybe will be newer versions, you can find the scripts here
a example code of loading a glyphicon the right way is down below:
<i class="fa fa-facebook-square" aria-hidden="true"></i>
Try using the glyphicons directly from bootstrap! Here is the bootstrap glyphicon "how to use" page: http://getbootstrap.com/components/#glyphicons-how-to-use
The gliphicon reference page is right above it.
If this does not solve the problem I would suggest fontawesome. I know fontawesome is not a gliphicon source, but it is very helpful.
Here is a link to font awesome's page:
http://fontawesome.io/
I hope this solves the problem!
I am not familiar with w3schools (because it is a terrible resource, would recommend using https://developer.mozilla.org/en-US/).
What I am guessing is that those are images. Their code must be pulling from a library of little images. This would greatly slow the loading of your DOM and I would recommend finding a different resource to get those icons!
Enter SVG's
SVG's are scalable vector graphics. They are two-dimensional graphics that will never pixilate, they are also toggleable with classes and pseudo-classes. Font-Awesome is a fantastic resource for these icons, would go so far as to say bookmark it!!
Regarding the particular "glyph" you pointed out as being pixelated. Here's font-awesome's version!
http://fontawesome.io/icon/info-circle/
All you need is the embedded code they email you or you can download their hold library (would not recommend).
Hope this helps!
Before you mark this as a dup, please read it all:
So I've been searching times a billion on here, and every other site, and can't find a solution that works.
I'm using .NET, and trying to use Bootstrap's Glyphicons.
A lot of them work perfectly fine, but NOT ALL of them are showing up.
I've literally tried every solution on here, and nothing works.
Including hosting the files myself, and loading them from the CDN.
Here's an example of one that won't load.
<span class="glyphicon glyphicon-queen"></span>
It looks like many people have had similar issues, but am I alone on this one?
Thanks, iBenji
try this, it works:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<span class="glyphicon glyphicon-queen"></span>
</body>
</html>
here is jsfiddle example:
https://jsfiddle.net/h885aeh0/
I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
Here is the HTML:
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
Source:
https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>
you can try taking a look at the above snippet. You may also use the below link for other similar issues:
https://cdnjs.com/libraries/semantic-ui
You don't need to use font-awesome of any other library
try cdn first Official icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
somethimes this doesn't work so what you can do is
go semantic-ui official page
download semantic ui zip folder and extract
in component folder you can find icon.min.css
include that file in index.html
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
<i class="disabled users icon"></i>
ENJOY
My solution was pretty simple (once I worked it out). I had edited themes.config to use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.
/* Elements */
:
#flag : 'supernewtheme';
#header : 'supernewtheme';
#icon : 'supernewtheme';
#image : 'supernewtheme';
#input : 'supernewtheme';
:
Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my build folder in the correct place, it was.
Changing the theme back to default for #icon did the trick:
#icon : 'default';
if someone is using electron or any other JavaScript framework.
This might work for you.
Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great.
Basic solution I opted is in reference to this official error reporting.
Also in my UI icon wasn't appearing for a drop-down so I used console to solve like
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
Hope it helps.