Menu
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:
775
Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects.
The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. The Glyphicons are used for some texts, forms, buttons, navigation, and etc. The bootstrap has many Glphyicons but there has a standard format to display icons.
Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
What are Glyphicons? Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
