I got my invite into Inbox by Gmail a few days ago. I thought its floating action button was pretty nifty, so I set out to recreate it.

I ended up settling on using an existing project, Font Awesome, to drive the icons. It’s already easy to make stacked icons:

I am actually made up of two icons!

And here are the individual icons:

Circle
Star

So it was a simple matter to add a few additional classes to support switching between one overlaid icon and another. The transition seems to be the same between the webapp and the native Android app, with the difference of one being on hover and the other being on tap (respectively). I made mine on click (tap, if you’re on a touchscreen device).

See the Pen Google Inbox FAB With Font Awesome by Paul (@peiche) on CodePen.0

Fun fact: the social media menu (located inside the hamburger button’s overlay) also uses stacked icons. Since I bundle Font Awesome (as of this writing, version 4.2) in my WordPress theme, it’s exceedingly simple.

Husband. Daddy. Programmer. Artist. I’m not an expert, I just play one in real life.

  • iantrich

    I’m pretty new to front-end dev and was wondering how does one go about getting this to float on the bottom right of the screen?

  • iantrich

    Figured it out…and wow that was easy ;)

    #fabAction {
    position: fixed;
    bottom: 10px;
    right: 10px;
    }

  • Eric B

    How do I input this on my Blogger?