DEV Community

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

Tiago Romero on September 04, 2018

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

Read full post

Sergiu Mureşan • Sep 8 '18

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 • Sep 8 '18

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 • Sep 4 '18

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 • Sep 4 '18 • 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...

Ben Halpern • Sep 4 '18

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 • Sep 4 '18

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

Tiago Romero • Sep 4 '18

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 • Sep 4 '18

Woohoo!

Tiago Romero • Sep 5 '18

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 • Sep 4 '18 • Edited

#2!!

Ben Halpern • Sep 4 '18 • Edited

#1 😄

Is there a #0? 🤔

Tiago Romero • Sep 4 '18 • Edited

Great catch! Thanks @tux0r for that :)

Tiago Romero • Sep 5 '18

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 !