loading...
Cover image for The DEV badge is available on Font Awesome!
The DEV Team

The DEV badge is available on Font Awesome!

ben profile image Ben Halpern ・2 min read

Font Awesome is an incredibly popular library for adding icons to webpages. Pretty much every site these days use icons of some sort, and chances are they are loaded via Font Awesome. What exactly does "incredibly popular" mean? According to their landing page, the library is used on 100,000,000 sites. They are the de facto default for including icons on webpages. The project makes adding icons to sites simple by including them as a font, but there are alternative ways to use Font Awesome icons, such as SVG.

DEV is now included in Font Awesome version 5.4!

Thanks to popular demand from the community, our logo is now a part of the set. There are 388 total brand icons in the entire set, including some alternate versions of certain logos. In all there are about 250 total companies included in the Font Awesome set and DEV is now one of them. That puts us in remarkably exclusive territory. A lot of our members have been adding the DEV badge to their Font Awesome-driven personal sites in various hacky ways, but now we're part of the default.

Hack example:

Now that we are officially part of the library, you can add <i class="fab fa-dev"></i> to your any page that already makes use of Font Awesome!

You can also download the badge as an SVG right here if you'd like:

https://gist.github.com/benhalpern/eff81b17359acafd17849146549b9291

The above SVG file is only 798 bytes. If you want to modify the color of that SVG you can change the fill attribute in its code. If you are not familiar with SVGs, they are vector images constructed with markup language, and are a very powerful concept. Here's a good post on the web technology:

SVG vs font set vs png vs whatever else. It's all just implementation details, but implementation details matter. Font Awesome's popularity speaks to this.

Thank you to Font Awesome for validating our project by inclusion in version 5.4 and thanks to the community for making this happen. If your site has the DEV badge alongside your GitHub and Twitter badges etc. feel free to link to it in the comments to show it off. 😄

Discussion

pic
Editor guide
Collapse
jackharner profile image
Jack Harner 🚀

That's Awesome! Congrats! Now I can go update all of my sites and just use FontAwesome instead of the SVG.

Edit: JackHarner.com has been updated with the new badge

Collapse
ben profile image
Ben Halpern Author

Woohoo!

(As a perf nerd I must add the reminder that using font libraries is not always performant way to do things, but is a very dev-friendly way)

Either way, go forth and put the DEV badge everywhere with links to your profile!

Collapse
kip13 profile image
kip

Can you share a reading about perf and font libs ?

Collapse
vlvrd profile image
vlvrd

Hey, @ben ! I actually had this in my todo list (github.com/vlvrd/bondo/blob/master..., but no DEV icon yet at vlvrd.me/). It felt kinda poser-ish since I'm just starting to really use DEV but hey fakeittillyoumakeitorsomething.

I'm about to add the raw SVG - Font Awesome later since I just found out about it - but kinda wanted to check first if I can use the DEV SVG as it is. Is there any license I should be compliant of or how does it work?

Collapse
ben profile image
Ben Halpern Author

You're welcome to use the SVG in any capacity as long as you're not literally trying to impersonate DEV or confuse people (which you are not). You're 100% good and you're a super welcome DEV member even if you're just a reader/lurker. No need to feel like a poser in any way.

Collapse
vlvrd profile image
Collapse
justinhhorner profile image
Justin Horner

Awesome! Congrats, team 🎉😁

Collapse
jsrn profile image
James

That's fantastic, @ben ! You and the rest of the team must be over the moon.

Collapse
ben profile image
Collapse
adam_cyclones profile image
Adam Crockett

You know you've made it now haha

Collapse
thebigl profile image
Leonard Morrison

Is it available in the most recent Ruby Gem?

Collapse
ben profile image
Ben Halpern Author

Hmm I’m not sure, but this was Font Awesome 5.4 so there is probably info on how the gem tracks the project.

Collapse
thebigl profile image
Leonard Morrison

I'll keep my eyes open. I want to add this badge to my blog soon enough.

Collapse
nimicent profile image
Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

I stopped using FontAwesome long time ago, but I have been their backer back in the day. Congrats on getting the DEV badge included in there :) 👍

Collapse
_patrickgod profile image
Patrick God

Congrats! That's amazing!

Just added the badge to my blog. :D

Collapse
ben profile image
Ben Halpern Author

Special thanks to @alvarocavalcanti , @themindfuldev and the hundreds more who petitioned Font Awesome to get us included. ❤️

Add new branded icon for Dev.to #12589

dev.to is a great platform which I have been using more frequently in the last couple of months. It has great articles and great discussions.

Collapse
themindfuldev profile image
Tiago Romero Garcia

Hey @ben they ended up adding the icon as <i class="fab fa-dev"></i> as it appears in fontawesome.com/icons/dev?style=br...

So I guess we need to update Add the DEV Badge to your personal site to reflect that as it's using fa fa-dev-to instead.

In time: just updated my portfolio to use the brand new DEV font-awesome badge and it looks great!

Collapse
themindfuldev profile image
Tiago Romero Garcia

Yaaay wonderful news! I will update my site and my post once I’m back from my vacations :)

Collapse
sethusenthil profile image
Sethu Senthil

Finally! That took forever!

Collapse
dev_in_the_house profile image
Devin

Awesome!