How I redid the DEV badge using Font Awesome [updated]
Tags: fontawesome, react, jamstack, gatsby
Published: 2018-09-04 07:09:08

---
title: How I redid the DEV badge using Font Awesome [updated]
published: true
description: How I used Font Awesome layering features to make an icon for DEV to put on my portfolio.
tags: fontawesome,react,jamstack,gatsby
cover_image: https://thepracticaldev.s3.amazonaws.com/i/anbrbh5nmkhijr0e7uwr.png
---

I just redid [my portfolio](https://tiagorg.com).

For this project, I opted for [Gatsby](https://www.gatsbyjs.org), since I'm a fan of [JAMstack](https://jamstack.org) and [React](https://reactjs.org).

Just to save some time, I picked up one of the [Gatsby starters](https://gatsbyjs.org/docs/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](https://fontawesome.com), which is indeed awesome!

> **EDIT:** Font Awesome now has an icon for [DEV](https://fontawesome.com/icons/dev?style=brands)! 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](https://dev.to/themindfuldev), and I found there's a SVG we can use, as instructed on [Add the DEV Badge to your personal site](https://dev.to/p/badges).

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](https://fontawesome.com/how-to-use/on-the-web/styling/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](https://www.dafont.com/joystick.font) 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](https://github.com/themindfuldev/gatsby-tiagorg):

```css
/* 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](https://github.com/FortAwesome/react-fontawesome):

```javascript
// 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
/* 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
<!-- 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:

{% codepen https://codepen.io/themindfuldev/pen/MqmxdP %}

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