Brock Duncan Web Development

The Blog

My plan is to write short how-to posts covering different web development topics as I learn the subject in order to share knowledge and cement the material in my brain.

Go back to the homepage

Xcode's iOS Simulator for Local Testing

A really nice feature available in Xcode is the iOS Simulator. Testing local sites is as easy as opening Safari and typing localhost:9000 into the address bar.

Once Xcode is installed and up-to-date you can access Simulator by doing a Spotlight Search (Cmd+Space) for "Simulator" or if you're in Xcode it's under Xcode > Open Developer Tool > Simulator in the menu bar.

iPhone Simulator

Using Font Awesome with Gatsby and React

Using Font Awesome icons with React projects (which Gatsby is built on) is a pretty straight-forward process. Here are the steps I followed to add icons to my project.

  1. Install Font Awesome dependencies.

    npm i -S @fortawesome/fontawesome-svg-core
    npm i -S @fortawesome/free-solid-svg-icons
    npm i -S @fortawesome/react-fontawesome
  1. Create a fontawesome.js file. I'm going to place this file in src/utils.

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faCoffee } from '@fortawesome/free-solid-svg-icons'
    /* Now add the faCoffee icon to our library and we can use
    the string name 'coffee' in our app */
  1. Add FontAwesomeIcon to our Button.js component.

    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
    const ButtonLink = props => (
    <Link to={props.url}>
    {props.text} <FontAwesomeIcon icon={props.icon} />
  1. Use the button component in our app and pass it an icon to use.

    // Use icons from our library
    import '../utils/fontawesome'
    import ButtonLink from '../components/ButtonLink'
    <ButtonLink to={"/the-moon"} text={"The Moon"} icon={'coffee'} />

That's pretty much it. I'll add more about using Pro icons in a bit.