Bulma + Font Awesome Just Displays a Hex Value

Question

I am using bulma as my default css framework.

I used npm to download fontawesome-free.

I have included it into a global scss that compiles to css on build.

I follow the Bulma instructions here : https://bulma.io/documentation/elements/icon/

When the page displays I see a square with the hex value and not the icon itself.

here is my global SCSS (i have tried with importing the css as well as the scss)

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
//@import "../node_modules/@mdi/font/scss/materialdesignicons.scss";
//@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
//@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
//@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
//@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
//@import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims.scss";
@import "../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
@import "../node_modules/bulma/bulma.sass";

here is the html :

  <div class="columns">

        <div class="column is-full">
            <a class="action-text px-2 mx-2">Who Are We</a>
            <span class="icon has-text-info">
                <i class="fas fa-home"></i>
            </span>
            <a class="action-text px-2">What Do We Do</a>
        </div>
    </div>