<!DOCTYPE html>
<html lang="en">

<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <title>The Dev icon</title>

  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" integrity="sha384-kW+oWsYx3YpxvjtZjFXqazFpA7UP/MbiY4jvs+RWZo2+N94PFZ36T6TFkc9O3qoB" crossorigin="anonymous"></script>
</head>

<body>

  <p>
    <span class="fa-layers fa-4x">
      <i class="fas fa-square icon-bg"></i>
      <span class="fa-layers-text icon-fg">DEV</span>
    </span>
  </p>

</body>

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

p {
  margin-left: 1em;
}

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

.icon-fg {
  font-family: Joystick;
  font-size: 0.6em;
  color: white;
  padding: 2px 0 0 2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.