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");
}

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>

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;
}

<!-- 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>

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.

Comments

[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?

[Tiago Romero]

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...

[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

alvarocavalcanti commented on Mar 13, 2018

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.

View on GitHub

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

[Tiago Romero]

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...

[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. 🙂

[Tiago Romero]

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

[Tiago Romero]

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 :)

[Ben Halpern]

Woohoo!

[Tiago Romero]

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

[Nested Software]

#2!!

[Ben Halpern]

#1 😄

Is there a #0? 🤔

[Tiago Romero]

Great catch! Thanks @tux0r for that :)

[Tiago Romero]

It turned out these styles were being added dynamically when Font Awesome was transforming <i> into SVG. I just fixed it by adding some default styles. Thanks again @tux0r !