How to include a single Icon (or small set of icons) in a web page

To include a small set of icons with (a set of one at the moment: <i class="fa fa-sign-in">) in a wordpress plugin, I’m using Gulp and Bower to manage a minimal set of Font-Awesome components:

  "name": "mz-mindbody-api",
  "version": "2.0",
  "authors": [
    "Mike iLL Kilmer <>"
  "description": "Wordpress MBO API Integration Plugin.",
  "license": "MIT",
  "homepage": "",
  "dependencies": {
    "font-awesome": "~4.3.0"
    "font-awesome": {
      "main": [

I read that the browser only loads a single one of the Font files, each of which are btwn 37129kb. The main FontAwesome.scss file is about 450 bytes and the other two scss files are like 50 bytes combined (all of which get compiled down to minified css by Gulp).

I know a little bit about file sizes and transfer load (learning about fonts) and this seems like a fairly small amount of data, but at the same time, there’s a lot going on in the plugin and I’d like to keep it as lean as possible.

Is there an approach that would require less data transfer and still provide a relatively clean, fluid front end icon?

Let me know your thoughts.