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 <mike@mzoo.org>"
  ],
  "description": "Wordpress MBO API Integration Plugin.",
  "license": "MIT",
  "homepage": "www.mZoo.org",
  "dependencies": {
    "font-awesome": "~4.3.0"
  },
    "font-awesome": {
      "main": [
        "scss/_variables.scss",
        "scss/_icons.scss",
        "scss/font-awesome.scss",
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    }
  }
}

I read that the browser only loads a single one of the Font files, each of which are btwn 37 – 129kb. 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.