Limit Font Awesome imports to reduce CSS size

We were using Font Awesome fonts and selectors to support the browsers
which don't support mask images (at the time of writing, about 5% of the
browsers). However, we were only importing the selectors in order to
extend them. This resulted in our compiled CSS including styles for
every Font Awesome icon (currenty, more than a thousand), even if we
only use a few of them.

So we're using Font Awesome variables instead of using the selectors it
provides. Since variables are only compiled in the CSS if they're
actually used, this reduces the size of our compiled CSS considerably.
In production environments, the size is reduced from 539KB to 475KB,
meaning we reduce its size in about 12%.

The downside here is we can't easily use Font Awesome variables in our
Sass mixins because we can't use interpolation in variable names (that
is, we can't use `$fa-var-#{icon}`). So we're using a map containing all
Font Awesome variables in order to access it in the mixin.

Note installations using `.fa-*` selectors will now have to add extra
`@import` clauses.

app/assets/stylesheets/application.scss

@@ -3,7 +3,8 @@
 @import "c3";
 @import "social-share-button";
 @import "font-awesome-sprockets";
-@import "font-awesome";
+@import "font-awesome/variables";
+@import "font-awesome/path";
 @import "jquery-ui/autocomplete";
 @import "jquery-ui/datepicker";
 @import "jquery-ui/sortable";