DEV Community

Cover image for How I redid the DEV badge using Font Awesome [updated]
Tiago Romero Garcia
Tiago Romero Garcia

Posted on • Updated on

How I redid the DEV badge using Font Awesome [updated]

I just redid my portfolio.

For this project, I opted for Gatsby, since I'm a fan of JAMstack and React.

Just to save some time, I picked up one of the Gatsby starters so I can focus on the content and styles customization instead of building the whole thing from scratch.

I happened to pick up a theme which came loaded with Font Awesome, which is indeed awesome!

EDIT: Font Awesome now has an icon for DEV! At the time this post was written, the icon wasn't available so I used the layering feature to build it from scratch, which is what I demonstrate down below just for illustration purposes, I just don't recommend using this for adding DEV to your site, instead just go with the Font Awesome icon.

Then I got to the point I would like to put my social profiles all together. I wanted to put a badge for my Dev.to profile, and I found there's a SVG we can use, as instructed on Add the DEV Badge to your personal site.

However, I noticed it wouldn't match the look and feel of the rest of the Font Awesome icons, specially because my theme had different colors and sizes.

I was almost taking this fact for granted, when I stumbled over a new feature of Font Awesome 5: Layering.

Immediately, I took on the challenge to build a Dev icon using Font Awesome, so it would look like the other icons on my portfolio.

I am using the Joystick font, which @ben told me that we bought a license for, therefore anyone could use it to recreate our logo.

So you would need to include it on your code, like I'm doing below where I'm hosting it on my portfolio repo on GitHub, gatsby-tiagorg:

/* CSS */
@font-face {
  font-family: "Joystick";
  src: url("https://raw.githubusercontent.com/themindfuldev/gatsby-tiagorg/master/src/assets/fonts/Joystick.otf");
}
Enter fullscreen mode Exit fullscreen mode

And here is my code using the FontAwesomeIcon component in React, through react-fontawesome:

// JSX 
<span className="fa-layers fa-4x">
  <FontAwesomeIcon icon="square" style={{ transform: "scaleX(1.4)" }} />
  <span className="fa-layers-text" style={{ 
    fontFamily: "Joystick", 
    fontSize: "0.6em", 
    color: "white", 
    padding: "2px 0 0 2px"
  }}>DEV</span>
</span>
Enter fullscreen mode Exit fullscreen mode

If you do not use React, you can achieve the same thing with plain old HTML and CSS:

/* CSS */
@font-face {
  font-family: "Joystick";
  src: url("https://raw.githubusercontent.com/themindfuldev/gatsby-tiagorg/master/src/assets/fonts/Joystick.otf");
}

.icon-bg {
  transform: scaleX(1.4);
}

.icon-fg {
  font-family: Joystick;
  font-size: 0.6em;
  color: white;
  padding: 2px 0 0 2px;
}
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<span class="fa-layers fa-4x">
  <i class="fas fa-square icon-bg"></i>
  <span class="fa-layers-text icon-fg">DEV</span>
</span>
Enter fullscreen mode Exit fullscreen mode

You can see it working here in this Code Pen:

PS: you need to use the SVG + JS version of Font Awesome for this to work.

Top comments (14)

Collapse
 
codevault profile image
Sergiu Mureşan

I'm not too familiar with JSX and React so I don't understand why do you create an object to represent the style instead of using it inline. From this:

  <span className="fa-layers-text" style={{ 
    fontFamily: "Joystick", 
    fontSize: "0.6em", 
    color: "white", 
    padding: "2px 0 0 2px"
  }}>DEV</span>

to this:

  <span className="fa-layers-text" style="
     font-family: Joystick; 
     font-size: 0.6em; 
     color: white; 
     padding: 2px 0 0 2px;"
  >DEV</span>

Does react or JSX do something special when it sees the style param like that?

Collapse
 
themindfuldev profile image
Tiago Romero Garcia

Hi @codevault , the traditional approach of defining styles is simply not supported in JSX. The official reason is: this is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

So the external pair of curly braces is to indicate this is going to be read from a JSX variable, and the internal pair of curly braces is because it's a JS object.

Source: reactjs.org/docs/dom-elements.html...

Collapse
 
ben profile image
Ben Halpern

Speaking of Font Awesome. It looks like their process is influenced by a "leaderboard" which is sorted by reactions to the issue that requests the icon.

So everyone should go cast a vote on this issue which has been sitting around for a while:

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.

Add all the reactions so they know how much the DEV community cares to be includes. 😄

Collapse
 
themindfuldev profile image
Tiago Romero Garcia • Edited

Excellent, thanks @ben ! I just did it, and I noticed that also adding a comment impacts on our listing. After I added votes and 1 comment, the issue jumped up a couple positions on their leaderboard here: fontawesome.com/community/leaderbo...

Collapse
 
ben profile image
Ben Halpern

Thanks! PS, the DEV font is "Joystick" which we bought a license for, therefore anyone could use it to recreate our logo. I don't think it's the end of the world that yours is a bit off in this sense, but just an FYI. 🙂

Thread Thread
 
themindfuldev profile image
Tiago Romero Garcia

Awesome! Thanks for that. That sounds like a fun thing to do on my next break :D

Thread Thread
 
themindfuldev profile image
Tiago Romero Garcia

Hey @ben with yours and the dev community support we just went from 30th place to 8th on the leaderboard: fontawesome.com/community/leaderbo...

So we definitely became way more relevant for their upcoming releases!

What an awesome and engaged community to be part of :)

Thread Thread
 
ben profile image
Ben Halpern

Woohoo!

Thread Thread
 
themindfuldev profile image
Tiago Romero Garcia

Hey @ben , I just updated the article and the code, now I'm using the font Joystick and it looks much better! Thanks!

Collapse
 
nestedsoftware profile image
Nested Software • Edited

#2!!

Collapse
 
ben profile image
Ben Halpern • Edited

#1 😄

Is there a #0? 🤔

Some comments may only be visible to logged-in visitors. Sign in to view all comments.