CommunityNews

CommunityNews

Stop Using Icon Fonts

Just one year before the first web page went live in 1991, Microsoft began shipping perhaps the most well-known icon font, Wingdings. However, it would be nearly 22 years later before icon fonts would become a design trend on the internet.

The introduction of the @font-face CSS at-rule allowed web designers to specify custom fonts with which to display text. By 2011, all major browsers supported it. This gave birth to the idea that fonts composed of pictograms, like Wingdings, could be used in place of raster images on the web. Considering that real SVG support across all major browsers didn’t become stable until early 2020, icon fonts were the defacto way to add vector-based icons on your web site.

But icon fonts on the web were fundamentally flawed from the beginning. And now, with full SVG support at our disposal, it’s time to put a stop to their use, once and for all…

This thread was posted by one of our members via one of our news source trackers.

Where Next?

Popular Frontend topics Top

First poster: bot
A beginner’s guide to developing with React. React is a JavaScript user interface (UI) library that was built and is maintained by Faceb...
New
First poster: bot
WebAssembly has been one of the trendiest intermediate representations since a while. However, its definition of safety means preventing...
New
First poster: bot
JavaScript allows calling a function with a different number of arguments than the expected number of parameters, i.e., one can pass fewe...
/js
New
First poster: bot
Libsodium has been fully supporting WebAssembly as a target for quite a long time. This includes its built-in benchmark suite, that can r...
New
First poster: bot
Add WebAssembly, get performance. Is that how it really works? The incredibly unsatisfying answer is: It depends. It depends on oh-so-ma...
New
First poster: AstonJ
In this article, I will share with you some very useful HTML tips . Enjoy! ** Post will be updated regularly with new tips!* The loa...
New
First poster: bot
CSS Fingerprinting is a technique of tracking and gathering information on site visitors. This method exploits the nature of CSS to track...
New
First poster: bot
Holograms, light-leaks and how to build CSS-only shaders - Robb Owen . Get a shiny WebGL look without actually using WebGL. In this arti...
New
First poster: davearonson
What is surprising is that a 14kB page can load much faster than a 15kBpage — maybe 612ms faster — while the difference between a 15kB an...
New
ragamuf
A little halloween hocus-pocus on the value proposition of having a reliable test suite in place. You are not scared, are you?
New

Other popular topics Top

New
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
Rainer
Not sure if following fits exactly this thread, or if we should have a hobby thread… For many years I’m designing and building model air...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
rustkas
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
New
PragmaticBookshelf
Author Spotlight James Stanier @jstanier James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File > New Rule: And select Deny, O...
New
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New