Integrating Font Awesome with Less in Web Components

I started to deal with Semantic Web for my header during the last article. Today is going to be all about the sign-in, sign-out and profile buttons. These are very simple buttons and their conversion should pose no challenge. However, there are some interesting things we can talk about with respect to Font Awesome – a large collection of icons that are generally used as a replacement set for the Glyphicons that come with Bootstrap.

I am going to create a web component called <s-signin> – it is normally constructed like this:

<span class="icon"><i class="fa fa-sign-in"></i> Sign In</span>

The class in the <i> brings in an icon from the Font Awesome collection. I need to use the LESS files that are supplied with Font Awesome to bring in the library mixins in much the same way that I did with Bootstrap. I also need to load the Font Awesome font – either directly using an @import in the CSS, or indirectly by linking the stylesheet. I’m going to use the latter since I expect multiple web components will utilize Font Awesome.

I need a HTML file for the s-signin.html web component:

<dom-module id="s-signin">
    <link href="../jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="s-signin.css">
        <span id="content">
            <span id="icon"></span>
            <span id="msg">Sign In</span>
        is: "s-signin"

I’m not handling what happens when I click on this yet. That will come later. I also need a LESS file that will generate the s-signin.css file:

@import (reference) "../../style/site.less";
@import (reference) "../../../wwwroot/jspm_packages/npm/font-awesome@4.3.0/less/font-awesome.less";

#content {
    display: inline-block;

    #icon {

        &:before {
            content: @fa-var-sign-in;

    #msg {
        color: red;

This isn’t the final styling. However, it does show off how to import the Font Awesome library. There is one final thing I need to do. I need to exclude font-awesome from “inlining” in the vulcanization process. If I don’t do this, then font-awesome will be included three times – one for each component that uses it. I’ve altered the “build:components” task in Gulpfile.js like this:

gulp.task("build:components", [ "build:t_components" ], function() {
    // Vulcanize the element
    return gulp.src(path.join(paths.tmp, "**", "*.html"))
            dest: paths.dest.elements,
            inline: true,
            excludes: {
                styles: [ "font-awesome" ]
            strip: !DEV_MODE

You will find the initial versions of the s-signin, s-signout and s-profile web components (styling only) at tag testweb-3. I just wanted enough in these to start working on the collapsible navigation menu web component. I’ll revisit these components again later on.

You can find the components that I’ve developed here at tag testweb-3.