I was inspired to add a social icon links to my website after seeing it on a few other developer portfolios. There was just a nice clean feel to it. 😊 It’s pretty straight forward but there are a few gotchas. I will walk through how I added social icons to my website and how I worked through the issues I hit along the way.

Before: My portfolio before adding icon links

After: My portfolio after adding icon links

Steps: 0. Setup

  1. Adding a row of links
  2. Centering the links
  3. Converting the text links to icon links
  4. Formatting the icon links
  5. Fixing icon link accessibility
  6. Fixing icon link resize issues

To add the icon links I will be modifying the bio component at {project_root}/src/components/bio.js. JSX only allows for a single parent tag to be returned so we’re going to need to create a parent container to house the existing content and allow the creation of a new row.

Code

<!-- new top-level tag with column formatting -->
<div
  style={{
    display: `flex`,
    flexDirection: `column`,
    marginBottom: rhythm(2.5),
  }}
>
  <!-- previous top-level tag -->
  <div
    style={{
      display: `flex`,
      marginBottom: rhythm(2.5),
    }}
  >
    Existing content...
  </div>
  <!-- new content goes here -->
</div>

Start small. Just get it on the screen and get it working.

I will have icon links for twitter, github, and dev. The gatsby blog starter already includes a config item for twitter so I’ll just need to add entries for github and dev in the gatsby-config located at {project_root}/gatsby-config.js.

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `soohoo.io`,
    author: `Stephen SooHoo`,
    description: `A starter blog demonstrating what Gatsby can do.`,
    siteUrl: `https://gatsby-starter-blog-demo.netlify.com/`,
    social: {
      twitter: `soohoowoohoo`,
      github: `soohoowoohoo`,
      dev: `soohoowoohoo`,
    },
  },
  ...
}

bio.js

<!-- new content goes here -->
<div>
  <a href={`https://twitter.com/${social.twitter}`}>Twitter</a>
  <a href={`https://github.com/${social.github}`}>GitHub</a>
  <a href={`https://dev.to/${social.dev}`}>DEV</a>
</div>

Result

A row of left-centered text links Its not pretty but it works. We’ll get there…

One thing to note is that kebab case css properties are camel case in JSX. Below the textAlign attribute is used to reference the text-align css property.

bio.js

<!-- new content goes here -->
<div style={{ textAlign: `center` }}>
  <a href={`https://twitter.com/${social.twitter}`}>Twitter</a>
  <a href={`https://github.com/${social.github}`}>GitHub</a>
  <a href={`https://dev.to/${social.dev}`}>DEV</a>
</div>

Result

A row of centered text links

Can’t remember how I learned about the font-awesome icon set but I’m using it. It was straight forward to setup following their installation and usage instructions on GitHub.

Package Install

$ npm install --save @fortawesome/react-fontawesome
$ npm install --save @fortawesome/free-brands-svg-icons

bio.js

// package imports at the top
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDev, faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'

<!-- new content goes here -->
<div style={{ textAlign: `center` }}>
  <a href={`https://twitter.com/${social.twitter}`} >
    <FontAwesomeIcon icon={faTwitter}/>
  </a>
  <a href={`https://github.com/${social.github}`}>
    <FontAwesomeIcon icon={faGithub}/>
  </a>
  <a href={`https://dev.to/${social.dev}`}>
    <FontAwesomeIcon icon={faDev}/>
  </a>
</div>

Result

A row of centered icon links We’re done, right? They’re icon links. 😅

The typical icon link is not underlined and is not the default hyperlink blue. Increasing the font size, fixing the spacing, and changing the icon color wasn’t bad. However, removing the underline was more difficult. Google/stack overflow gave me the following answer but no luck.

Stack Overflow answer

After spending enough time on google, I dug into the developer tools and inspecting the icon link element to figure out which css property was giving me the underline.

Debugging with browser developer tools

Turns out it was the box-shadow property. I was not able to find much on why this is the reason, but it works now.

bio.js

<!-- new content goes here -->
<div style={{ textAlign: `center` }}>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://twitter.com/${social.twitter}`}
  >
    <FontAwesomeIcon icon={faTwitter}/>
  </a>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://github.com/${social.github}`}
  >
    <FontAwesomeIcon icon={faGithub}/>
  </a>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://dev.to/${social.dev}`}
  >
    <FontAwesomeIcon icon={faDev}/>
  </a>
</div>

Result

A row of enlarged, black, and propery spaced icon links without underlines

You can dry up the css by using css modules. There is a good tutorial on component scoped css provided by gatsbyjs.

Running a Lighthouse audit shows that the new icon links added aren’t fully accessible.

Lighthouse audit showing accessibility issues

What isn’t stated in the font-awesome usage documentation is that you can add the title property to the font-awesome icon react component to make your icon more accessible.

bio.js

<!-- new content goes here -->
<div style={{ textAlign: `center` }}>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://twitter.com/${social.twitter}`}
  >
    <FontAwesomeIcon icon={faTwitter} title='Twitter'/>
  </a>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://github.com/${social.github}`}
  >
    <FontAwesomeIcon icon={faGithub} title='GitHub'/>
  </a>
  <a
    style={{
      fontSize: `1.75em`,
      padding: `0em 0.5em`,
      color: `#000`,
      boxShadow: `none`,
    }}
    href={`https://dev.to/${social.dev}`}
  >
    <FontAwesomeIcon icon={faDev} title='DEV'/>
  </a>
</div>

Result

Icon links with titles for accessibility

Lighthouse audit showing no accessibility issues

This issue only showed up after deploying the icon links to my site. Everything was fine during local development.

Font-Awesome icon refresh size issue

The reason for this is that the icon loads before the font-awesome css is loaded. The solution is to load the font-awesome css before react loads and to disable font-awesome from loading it’s css again. I learned this with help from this article by Markos. He explains the problem and shows the solution in a clear and concice way.

Inspiration

Here are a few developer portfolios that inspired me to add the social icon links.

Ali’s Portfolio: https://www.alispit.tel/ Ali Spittel&rsquo;s Portfolio

Sean’s Portfolio: https://sean.is/ Sean Coker&rsquo;s Portfolio

Jane’s Portfolio: https://wongmjane.com/ Jane Manchun Wong&rsquo;s Portfolio