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

    How can add font-awesome pro?

    Help
    4
    14
    2213
    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
      Denni @digiproduct last edited by

      @digiproduct I read the docs. And failed in step 4:
      Create new boot file:
      $ quasar new boot fontawesome-pro
      screen
      what am I doing wrong?

      digiproduct 2 Replies Last reply Reply Quote 0
      • digiproduct
        digiproduct @Denni last edited by

        @Denni sorry, I don’t have it installed although I’m considering doing it.

        I just happened to have the link to the docs page handy when I saw your message, so posted it up for your convenience.

        1 Reply Last reply Reply Quote 0
        • digiproduct
          digiproduct @Denni last edited by

          @Denni ah … but … is this because you’re trying to run Quasar in the folder where you downloaded rather than in your actual project folder?

          D 1 Reply Last reply Reply Quote 0
          • D
            Denni @digiproduct last edited by

            @digiproduct I tried to do it in the project folder. But the quasar does not know the command “new”, which is described in the documentation

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              @Denni

              You’re using @vue/cli, so don’t try Quasar CLI commands cause they obviously won’t work 🙂
              So in your case follow step 1 -> 2 -> 3 then 6 (add that to your main.js without wrapping with the default export).

              D 1 Reply Last reply Reply Quote 0
              • D
                Denni @rstoenescu last edited by Denni

                @rstoenescu after steps 1, 2, 3 my project folder look like this: screen
                Folder src/boot missing. 😕 What do I need to do?

                1 Reply Last reply Reply Quote 0
                • rstoenescu
                  rstoenescu Admin last edited by

                  You’ve chosen the @vue/cli path, so you don’t have boot folder. That’s a Quasar CLI feature.
                  Like I indicated above, do step 1 then step 2 then step 3 then jump to step 6 (where you add that to your main.js without wrapping with the default export)

                  D 2 Replies Last reply Reply Quote 0
                  • lilinazif74
                    lilinazif74 @digiproduct last edited by

                    @digiproduct Thank you very much for sharing this link

                    digiproduct 1 Reply Last reply Reply Quote 0
                    • D
                      Denni @rstoenescu last edited by

                      @rstoenescu thank You very very! This work! 🎆

                      1 Reply Last reply Reply Quote 0
                      • digiproduct
                        digiproduct @lilinazif74 last edited by

                        @lilinazif74 My pleasure

                        1 Reply Last reply Reply Quote 0
                        • D
                          Denni @rstoenescu last edited by

                          @rstoenescu
                          my main.js:

                          import './config/quasar';
                          import '@fortawesome/fontawesome-pro/css/fontawesome.min.css'
                          //import '@fortawesome/fontawesome-pro/css/brands.min.css'
                          import '@fortawesome/fontawesome-pro/css/light.min.css'
                          import '@fortawesome/fontawesome-pro/css/solid.min.css'
                          import '@fortawesome/fontawesome-pro/css/regular.min.css'
                          

                          my ./config/quasar

                          import Vue from 'vue'
                          import {
                            Quasar,
                            ...
                          } from 'quasar'
                          import iconSet from 'quasar/icon-set/fontawesome-v5.js'
                          
                          Vue.use(Quasar, {
                            ...
                            iconSet,
                          });
                          

                          My template:

                          <q-icon
                            name="fal fa-atom-alt"
                          />
                          <q-icon
                            name="fas fa-atom-alt"
                          />
                          <q-icon
                            name="far fa-atom-alt"
                          />
                          

                          fas and far icons are visible for one moment only. Then:
                          alt text
                          Help me please. How do I fix this?

                          1 Reply Last reply Reply Quote 0
                          • D
                            Denni last edited by

                            I replaced in my “./config/quasar”

                            //import iconSet from 'quasar/icon-set/fontawesome-v5.js'
                            import iconSet from '@fortawesome/fontawesome-pro/js/all.min';
                            

                            and all work fine!

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