loading...
Cover image for How I redid the DEV badge using Font Awesome [updated]

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

themindfuldev profile image Tiago Romero Garcia Updated on ・3 min read

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.

Discussion

pic
Editor guide
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 Author

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 Author

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 Author

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 Author

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
Thread Thread
themindfuldev profile image
Tiago Romero Garcia Author

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
Collapse
ben profile image
Ben Halpern

#1 😄

Is there a #0? 🤔

Collapse
tux0r profile image
tux0r

I just redid my portfolio.

And you might want to fix this bizarre "Send message" thing:

Screenshot

(Firefox 61, Windows 10, JavaScript disabled.)

Collapse
themindfuldev profile image
Tiago Romero Garcia Author

Great catch! Thanks @tux0r for that :)

Collapse
themindfuldev profile image
Tiago Romero Garcia Author

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 !