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.
Related
I have been tired of writing code but the icon is not shown on the Web page, I have tried changing the background still not seen.
to add fontawesome icons, you first need to make an account on https://fontawesome.com.
Once you made an account, then simply go to https://fontawesome.com/kits to make a new kit for your project. It is very easy to make a new kit on their. All you need is to just follow the instructions given by them.
Finally you will be able to see something like "Add Your Kit's Code to a Project". Copy kit code from there and paste it in the header part of your HTML file.
Here is an example of how to link it to your HTML file. (Please note that this won't display anything because this is not a valid fontawesome kit.)
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://kit.fontawesome.com/YOUR_OWN_KIT_CODE.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
</body>
</html>
Thanks and best regards!
I created a random quote generater webpage as part of the freecodecamp curriculum and am now uploading the files to github so that they can be hosted on there as their own webpages. The page works fine in codepen but the 'buttons' don't work when I upload the page to github. I can't figure out why. I would appreciate any feedback and insight on this issue! (I'm quite new to web development and coding in general so I apologize in advance if this is a stupid/simple error) Thanks!
I'm also not sure why the font size is so small on the github version :/
page on codepen - https://codepen.io/armte312/pen/Qrvyjr
github webpage - https://armte.github.io/quotegen.github.io/
github repo - https://github.com/armte/quotegen.github.io
code with issue:
<div class="button-row" id="button-row">
<a class="button tweet-quote" href="#" id="tweet-quote"><i class="fab fa-twitter-square"></i></a>
<a class="button new-quote-btn" href="#" id="new-quote-btn">New Quote</a>
</div><!--End of button-row !-->
I tried using the z-index property because I wasn't sure if some other element may be 'in front of' the a tags but that didn't seem to work.
Also tried a more updated version of bootstrap but that didn't seem to matter either.
The 'new quote' button (an tag) should react to the cursor hovering above it and when it's clicked but it does neither...
You have your jquery set as
<script type="text/javascript" src="jquery-3.3.1.js"></script>
while you don't have that name of a file in your github repo. Use this code instead
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Remove the duplicate
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
I am really confused and I do not understand why I am getting the error below whenever I add an img element and I link an image file to it. The path to the image is correct, everything is done locally, the image is displayed without any visual issues. But whenever I open the console I see this error message:
The weirdest thing is that whenever I open another html file in the same project and I just add ANY image to it just to test, I get the same error, even though I never got that before. This is in Chrome by the way. I also tested in Firefox, Opera, IE, Edge and Safari, but there I see no error messages. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Warcraft III Veto</title>
<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<!-- Main Style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="veto">
<div class="bar">
<img src="img/races/human.png">
</div>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<!-- Main Script -->
<script src="dist/js/veto.js"></script>
</body>
</html>
Something else I noticed is that whenever I delete my scipt tags that link to both my script file (which by the way is empty as well as my css), and vue.js, the error message dissapearas. I checked to see if the link to vue was correct and it was. I deleted all files and re-created them, but I still get the error. I am so confused, any help would be greatly appreciated.
I think this might be an issue with the version of Chrome.
This should be resolved in the latest update as per the discussion on this thread.
Hope that helps.
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!
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>