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

New
First poster: AstonJ
Welcome to the 5th edition of the JavaScript Rising Stars, our annual round-up of the JavaScript landscape! The concept is the same as b...
/js
New
First poster: bot
How I built a telnet chat server in 2021 with WebAssembly. I love the aesthetics of terminals and I’m not the only one, there is a whole...
New
First poster: bot
VanillaJS v. jQuery v. hyperscript Below are comparisons of how to implement various common UI patterns in vanilla javascript, jQuery an...
New
StuntProgrammer
It’s rare to see a web app that doesn’t use XMLHttpRequest (or fetch, the new API with comparable capability). XMLHttpRequest (which we c...
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
mssantosdev
Our take on how to build a frontend style guide with Phoenix Components, Atomic Design and plain CSS, with focus on reusability and code ...
New
sundi
Learn to customize the Error HTML module in Phoenix LiveView, while enhancing the UX and retaining the typed URLs on branded 404 pages. ...
New
New
rushilbhuptani
Introduction Dark mode is one of the most popular UI options in the current applications. It will offer less eyewear, enhanced battery li...
#ui
New

Other popular topics Top

Devtalk
Hello Devtalk World! Please let us know a little about who you are and where you’re from :nerd_face:
New
PragmaticBookshelf
Stop developing web apps with yesterday’s tools. Today, developers are increasingly adopting Clojure as a web-development platform. See f...
New
PragmaticBookshelf
Andy and Dave wrote this influential, classic book to help their clients create better software and rediscover the joy of coding. Almost ...
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
AstonJ
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
New
PragmaticBookshelf
Build modern server-driven web applications using htmx. Whatever programming language you use, you’ll write less (and cleaner) code. ...
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
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New
PragmaticBookshelf
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
New
xiji2646-netizen
Woke up to this today: Claude Code’s complete source code exposed via npm source map. Not a snippet. All 512,000 lines. 1,900 TypeScript ...
New