If q-tab "icon" prop is a string, how can I use e.g. FontAwesome fonts here?
I don’t know how to solve this.
Hi, not supported currently.
@rstoenescu Is there a way around this? Because I don’t think material Icons are enough.
There will be in the near future.
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.
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
<i>alarm</i>) while for Fontawesome you need to add a class name to the tag (
<i class="fa fa-calendar"></i>).
As a result, v0.14 will have a
q-iconcomponent which will deal with the correct markup.
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 last edited by
This is working for me in 0.16.4.
<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 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" />