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.
    • digiproduct
      digiproduct @Denni last edited by

      @Denni Here you go … it’s already in the docs …

      https://v1.quasar-framework.org/options/installing-icon-libraries#Using-Fontawesome-Pro

      D lilinazif74 2 Replies Last reply Reply Quote 0
      • 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