No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    6
    1116
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dgk last edited by

      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.)
      
      1 Reply Last reply Reply Quote 0
      • nothingismagick
        nothingismagick last edited by

        Because you upgraded you missed a compliance bump:

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

        That should get you sorted.

        1 Reply Last reply Reply Quote 0
        • D
          dgk last edited by 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',
          
              ],
          
          1 Reply Last reply Reply Quote 0
          • D
            dgk last edited by

            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

            1 Reply Last reply Reply Quote 0
            • D
              dgk last edited by 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

              M 1 Reply Last reply Reply Quote 0
              • M
                MagoSchmidt @dgk last edited by

                @dgk Thank you very much! Solved my problem!

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post