Untitled

<!DOCTYPE html>
<html>
  <head>
<!--     TODO: INCLUDES ALL REQUIRED DEPENDENCIES. vue.js quasar.js fontawesome  -->
  </head>
  <body>
    <h1>
      Quasar Framework Icons
    </h1>
    <article>
      <header><h1>Fontawesome</h1></header>
      <article>
        <header><h1>Stacks</h1></header>
        this example uses quasar-framework@0.17.16.
        <p>Nesting QIcon components it's fine and get the desired results but some adjustments are required</p>
        <q-icon name="fa fa-stack" size="2em">
<!--           the fa-stack-1x|fa-stack-2x it's very important because make the position of icons stack -->
          <q-icon name="fas fa-camera fa-stack-1x"></q-icon>
<!--           the size attribute it's needed because .q-icon ovverrides the .fa-stack-2x font-size definition, the same for the stack root -->
          <q-icon name="fas fa-ban fa-stack-2x" color="red" size="2em"></q-icon>
        </q-icon>
      </article>
    </article>
  </body>
</html>