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

    Is there a way to set a Q-btn icon size independent of the button size?

    Help
    5
    14
    2740
    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.
    • CWoodman
      CWoodman last edited by

      I’m using a mix of FontAwsome and MDI icons on button toolbars. The MDI icons tend to be smaller than the FA ones. I need a way to change the icon size without changing the overall button size, since I want all the labels to be the same font-size.

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by s.molinari

        You can try putting the icon in QBtn’s default slot as a QIcon and adjust its style accordingly.

        Scott

        CWoodman 1 Reply Last reply Reply Quote 0
        • Hawkeye64
          Hawkeye64 last edited by

          font-size: 2em!important

          1 Reply Last reply Reply Quote 0
          • CWoodman
            CWoodman @s.molinari last edited by

            @s-molinari Thanks, that works to set the size. But now my stacked button has the label above the icon instead of below it. Any suggestion how to overcome this?

            1 Reply Last reply Reply Quote 0
            • s.molinari
              s.molinari last edited by

              Can you make a codepen of your use case?

              Scott

              CWoodman 1 Reply Last reply Reply Quote 0
              • dobbel
                dobbel last edited by

                Mixing icon sets in a app let alone a single component is considered to be a bad practice.

                1 Reply Last reply Reply Quote 0
                • CWoodman
                  CWoodman @s.molinari last edited by

                  @s-molinari Scott, I tried to show in a codepen, but the ‘stack’ prop doesn’t seem to work there.
                  https://codepen.io/crawfordw/pen/MWKdyMW

                  metalsadman 1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman @CWoodman last edited by metalsadman

                    @CWoodman you are using a pre v1 version. Fork the codepen from docs in the Tools menu and edit it. This codepen https://codepen.io/rstoenescu/pen/VgQbdx. For the icon cdn’s copy paste the urls from here https://quasar.dev/start/umd#Installation into your codepen css settings.

                    CWoodman 1 Reply Last reply Reply Quote 0
                    • CWoodman
                      CWoodman @metalsadman last edited by

                      @metalsadman Thanks. Here’s the new codepen:
                      https://codepen.io/crawfordw/pen/KKVjoBK

                      metalsadman 1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by

                        Does that work?

                        https://codepen.io/smolinari/pen/mdVZLxN

                        Scott

                        1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel last edited by

                          Ah there’s a stack property in q-btn. It is buried quite deep in the docs. There’s 1 example but you really have to look for it…

                          metalsadman 1 Reply Last reply Reply Quote 0
                          • metalsadman
                            metalsadman @CWoodman last edited by

                            @CWoodman @s-molinari 's solution should be it, since you are using default slot.

                            1 Reply Last reply Reply Quote 1
                            • CWoodman
                              CWoodman last edited by

                              Yes that works. Thanks Scott! You guys are the best!

                              1 Reply Last reply Reply Quote 1
                              • metalsadman
                                metalsadman @dobbel last edited by

                                @dobbel woudnt hurt to try it on a codepen for others in the api that doesnt have specific example. P.Rs would be great =p, maybe an interactive one, where you can check/tick the list of props and see the effects.

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