如何在 vue/nuxt 项目中导入和使用 Fontello

Question

so i have my svg image which i want to convert it to icon using Fontello to convert and import it to my nuxt project. but the configuration doesn't seem to work

this is what in my nuxt.config.js file

head: {
  css: [
    '~/assets/css/main.css',
    '~/assets/css/animation.css',
    '~/assets/css/fontello.css',
    '~/assets/css/fontello-ie7.css',
    '~/assets/css/fontello-ie7-codes.css', /*if IE 7 */
  ],
}

in my html page, i'm using

<i @click="goToChat" class="the-icons demo-icon icon-chat menu ic-menu">&#xe800;</i>

and my css file,

.demo-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

the problem is the css file counldn't read font-family: "fontello"; did i config it wrong?

Answer 1

Stumble on the same issue just tonight and searched how to do it, I tried your config and it works.. Have you also imported the font folder provided by fontello which contains the actual font?

If you open the fontello.css file you will see the @font-face property with url reference to thos font files make sure the url is the right one (easiest solution is to import font and css folder from fontello.zip) so that your assets foolder looks something like that Assets - css - font - images