with upgrade to .16.4 the fontawesome extras are not being found

dgk

All was fine with .15.x. But now fontawesome icons no longer being found (trashes the rendering). Maybe quasar extras issue so I scrubbed node_modules and resintalled all dependencies but the problem persists. It does find the default material icons. I don’t use the other two.

First and last entry use material icons all the rest in menu using fa icons.

0_1527802651507_e3274ff9-a8a1-4364-8216-90b5ed9a8403-image.png

        <q-list-header>System Configuration</q-list-header>

        <q-item to="/config/hardware">
          <q-item-side icon="settings" />
          <q-item-main label="Hardware" sublabel="Real-time Controlled Hardware" />
        </q-item>
        <q-item to="/config/switches">
          <q-item-side icon="fa-toggle-on" />
          <q-item-main label="Switches" sublabel="Physical and Virtual" />
        </q-item>
        <q-item to="/config/circuits">
            <q-item-side icon="fa-lightbulb-o" />
            <q-item-main label="Circuits" sublabel="Lights/Outlets" />
        </q-item>
        <q-item to="/config/security">
            <q-item-side icon="fa-tablet" />
            <q-item-main label="Security" sublabel="grant access to system" />
        </q-item>
        <q-item to="/config/backup" >
            <q-item-side icon="fa-save" />
            <q-item-main label="Backup" sublabel="commit or restore configurations" />
        </q-item>
        <q-item to="/config" >
            <q-item-side icon="fa-info-circle" />
            <q-item-main label="Help" sublabel="info on configuring system" />
        </q-item>
        <q-item to="/home">
          <q-item-side icon="home" />
          <q-item-main label="Home" sublabel="return to main" />
        </q-item>
      </q-list>
    </q-layout-drawer>

Operating System                Linux(4.13.0-32-generic) - linux/x64
NodeJs                          10.3.0

Global packages
  NPM                           6.1.0

  yarn                          1.7.0
  quasar-cli                    Not installed
  vue-cli                       Not installed
  cordova                       Not installed

Important local packages
  quasar-cli                    0.16.4  (Quasar Framework CLI)
  quasar-framework              0.16.0  (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
  quasar-extras                 2.0.2   (Quasar Framework fonts, icons and i18n.)
  vue                           2.5.16  (Reactive, component-oriented view layer for modern web interfaces.)
  vue-router                    3.0.1   (Official router for Vue.js 2)
  vuex                          3.0.1   (state management for Vue.js)
  electron                      Not installed
  electron-packager             Not installed
  electron-builder              Not installed
  @babel/core                   7.0.0-beta.49   (Babel compiler core.)
  webpack                       4.9.1   (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support l
oaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.)
  webpack-dev-server            3.1.4   (Serves a webpack app. Updates the browser on changes.)
  workbox-webpack-plugin        3.2.0   (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)

nothingismagick

Because you upgraded you missed a compliance bump:

https://quasar-framework.org/guide/quasar-upgrade-guide.html#Icon-Packs

That should get you sorted.

dgk

to where you sent me not grokking what to change??

No longer use the extras key in config file?
change these somehow?
<q-item-side icon="fa-save" />

how is quasar supposed to know that fa- means fontawesome and how does icon font get loaded now?

    extras: [
      ctx.theme.mat ? 'roboto-font' : null,
      'material-icons',
      'fontawesome'
      // 'ionicons',
      // 'mdi',

    ],

dgk

ok really not clear what needs to be done from you upgrade instructions.

What needs to be done is preface all fa icon classes with fab or fas or far
and not JUST fab necessarily as that stands for branded icons only.
As to which one guess you have try till it works… so not so trivial anymore.

check this FA page out.
https://fontawesome.com/get-started/svg-with-js

https://fontawesome.com/get-started/svg-with-js

dgk

for those facing this issue just better go check all your icons here. They tell you which one (fab,fas,far) goes with the icon and since the FA upgrade some of your former icon names may be gone
https://fontawesome.com/icons?d=gallery

MagoSchmidt

@dgk Thank you very much! Solved my problem!