How to import custom webfonts into the <q-item-side> <q-icon> ?

keyb2004

The last one is what I want.

          1. <q-icon name="iconfont icon-delete" style="color: black"/><br>
          2. <q-icon name="icon-delete" style="color: black"/><br>
          3. <i class="iconfont icon-delete"></i><br>

I tried to import some custom webfonts into the <q-item-side> <q-icon> componets, but it seems like something wrong. How could I do?
Thanks.

s.molinari

Have a look here in the docs: http://beta.quasar-framework.org/components/icons.html

Scott

rstoenescu

@keyb2004 If the icon webfonts you want to use are not there, please specify which icon fonts you are using.

keyb2004

@rstoenescu Could you give me a example?

<q-icon name="iconfont icon-delete" style="color: black"/>

I think I have given the icon fonts. but doesn’t work.

rstoenescu

@keyb2004 I mean the name of the icon font, like: Ionicons, Fontawesome. Need to know the name and a link to it so I can add support for it. Thanks!

keyb2004

I use icomoon to import my custom webfonts. Can you help me to add this to your quasar-extra ?

I guess it will be added here:

// QIcon.js
    if (!icon) {
      name = ''
    }
    else if (icon.startsWith('fa-')) {
      name = `fa ${icon}`
    }
    else if (icon.startsWith('ion-')) {
      name = `${icon}`
    }
    else {
      name = 'material-icons'
      text = icon.replace(/ /g, '_')
    }

Thank you so much!

rstoenescu

Yes, that’s why I was asking thx, will add it tomorrow.

rstoenescu

IcoMoon font icon support was added. npm update quasar-framework. Also read docs.

After importing the IcoMoon css, you can use it like this:
<q-icon name="icon-delete" />

keyb2004

@rstoenescu <q-btn><q-ico> works !

But <q-list-side icon=“icon-delete”> doesn’t work properly.

Thanks for your help.

keyb2004

@rstoenescu I found an other way to solve the problem

          <q-item v-ripple>
            <q-item-side style="color: white"><q-icon name="icon-property" /></q-item-side>
            <q-item-main label="Docs"></q-item-main>
          </q-item>

rstoenescu

@keyb2004 said in How to import custom webfonts into the <q-item-side> <q-icon> ?:

But <q-list-side icon=“icon-delete”> doesn’t work properly.

Did you mean <q-item-side> instead?

keyb2004

yes. I use <q-item-side>

keyb2004

yes. I use <q-item-side>. its parameter “icon” doesn’t work.

keyb2004

Several components have the parameter icon=…
I think the upgrade will be applied on All of them.

rstoenescu

Yes. Update to latest and all icon props will work.

keyb2004

@rstoenescu So nice job! From now on, we can import our customer icons.

Thank you for your help!

rstoenescu

For anyone else reading this: if your favorite font icon is not listed in docs, please submit a request to add it

jodu

Hello !

I have seen a nice webfont for my personal usage, which is called Rpg-Awesome (https://github.com/nagoshiashumari/Rpg-Awesome)

I use only Quasar Vue plugin and not Quasar-cli, so I can’t (in fact I don’t know how to do it in the correct way) use icons from this webfont in the <q-icon> tag.

Can you add the support for this ?

Thank you a lot

No More Posting New Topics!

How to import custom webfonts into the <q-item-side> <q-icon> ?