PostCSS Font Awesome

PostCSS plugin to pull in a Font Awesome's icon unicode using content.

Before

.foo::before {
  font-awesome: camera;
}

After

.foo::before {
  content: '\f030';
}

The font-family and font-weight attributes will need to be supplied manually in your CSS, as the plugin will not provide those values. This ensures the plugin can be as flexible as possible, and is better handled using something like CSS custom variables just in case Font Awesome changes these values in the future.

Example

:root {
    --fa-light: 300;
    --fa-brand: 400;
    --fa-regular: 400;
    --fa-solid: 900;
    --fa-duotone: 900;

    --fa-font-family: 'Font Awesome 5 Free';
    --fa-font-family-brands: 'Font Awesome 5 Brands';
    --fa-font-family-duotone: 'Font Awesome 5 Duotone';
}

.icon::before {
    font-family: var(--fa-font-family);
    font-weight: var(--fa-solid);
    font-awesome: camera;
}

Options

Font Awesome Pro

By default the plugin will use the free version of Font Awesome. If you are using the pro version of Font Awesome, simply set the option:

require('@marketing-relevance/postcss-font-awesome')({
    fontAwesomePro: true, // defaults to false
})

Usage

postcss([ require('@marketing-relevance/postcss-font-awesome')({
    fontAwesomePro: false, // defaults to false
}) ])

Font Awesome must be installed using a package manager in order for this plugin to work: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

See PostCSS docs for examples for your environment.

TODO

• [ ] Maybe add an option to use the font awesome API and supply an api key to fetch pro icons so the NPM package doesn't need to be installed. Useful when using font awesome's kit's or CDN.