If q-tab "icon" prop is a string, how can I use e.g. FontAwesome fonts here?

Chanlito

I don’t know how to solve this.

rstoenescu

Hi, not supported currently.

Chanlito

@rstoenescu Is there a way around this? Because I don’t think material Icons are enough.

rstoenescu

There will be in the near future.

packy

Would importing Font Awesome Font and changing $icon-font-family to FontAwesome not work? I would also like to know more on this since most app branding you need to have your own set of icons, especially for tab bars.

-Do you have to make your own icon font family and pass it in like I mentioned above?
-Can you just pass in an SVG to the icon prop opposed to a Material string?

Any help would be great.

Cheers!!!

rstoenescu

Currently not possible because Material Icons is a ligature font while the others are not. End result is the different markup these font icons need. For material you need to have a text element inside the  tag (alarm) while for Fontawesome you need to add a class name to the tag ().

As a result, v0.14 will have a q-icon component which will deal with the correct markup.

siba2893

Is this fixed in the version 16.0, cause I still cant use font-awesome in tabs neither with the string or putting a <q-icon> inside

Hawkeye64

This is working for me in 0.16.4.
q-route-tab example:

          <q-route-tab
            v-if="isLoggedIn && checkFeature('events')"
            label="Events"
            to="/events"
            name="events"
            icon="fas fa-list-alt faa-pulse"
            class="faa-parent animated-hover"
            replace
            slot="title"
          />

q-tab example:

          <q-tab
            v-else
            label="Sign Out"
            name="sign-in"
            icon="fas fa-sign-out-alt fas faa-pulse"
            slot="title"
            class="faa-parent animated-hover"
            @click="signOut"
          />

No More Posting New Topics!

If q-tab "icon" prop is a string, how can I use e.g. FontAwesome fonts here?