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
Two ways you can take advantage of types in JavaScript (without TypeScript) - The Blinking Caret. This blog post describes how you can e...
New
First poster: bot
Writing Robust TypeScript Libraries — Sympolymathesy, by Chris Krycho. When writing a TypeScript library, it’s helpful to validate all t...
New
First poster: bot
The Elm Architecture is one of the great innovations Elm brought to the software industry. But one of the questions that often comes up i...
New
First poster: bot
User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us...
New
XSukhpreet
Mine is Firebase because it is easy to learn and fast .
New
First poster: bot
Implementing an app redesign is never routine nor easy. Two weeks after I was hired at Polytomic, I began implementing the app’s first re...
New
First poster: bot
Why in 2021 would you bother making a website without js? While researching this post I found two really great sources of information. S...
/js
New
Johannes-Werbrouck
In this article, we’ll make an app more exclusive by requiring an invite to register. Along the way we’ll touch on topics like middleware...
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
karolina.curiosum
Bumblebee & Stable Diffusion & Phoenix Live View meets in one place! Learn how to create a live prompt generating Stable Diffusio...
New

Other popular topics Top

malloryerik
Any thoughts on Svelte? Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
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
SpaceVim seems to be gaining in features and popularity and I just wondered how it compares with SpaceMacs in 2020 - anyone have any thou...
New
AstonJ
Inspired by this post from @Carter, which languages, frameworks or other tech or tools do you think is killing it right now? :upside_down...
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
AstonJ
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
wmnnd
Here’s the story how one of the world’s first production deployments of LiveView came to be - and how trying to improve it almost caused ...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New