Font Awesome 无法在 Vue 构建的 Web 组件中呈现

Question

我有一个 Vue 组件，我正在使用以下构建命令将其编译成 Web 组件：

npm run build -- --target wc --name projName src\components\server-config.vue

我的 Vue 文件中遗漏了一些内容，因为 Web 组件不会呈现超赞字体图标。这是我“npm 运行 serve”

时的样子

这是我把它编译成web组件并在demo.html中打开后的样子：

我看到几个问题：

字体不同
缺少用于查看密码的眼睛按钮
缺少复选框（尽管如果将鼠标悬停在它上面，您仍然会得到发光效果）
眼睛图标不见了。（只是作为 Vuetify 之外的测试包含在内）

如何将字体正确地包含到我的组件中？这是我当前的 vue 文件：

<template>
    <div style="text-align: center; font-family: sans-serif">
      <v-text-field label="Password" class="mx-4" v-model="password" :type="showPass ? 'text' : 'password'" @click:append="showPass = !showPass" :append-icon="showPass ? 'far fa-eye' : 'far fa-eye-slash'"></v-text-field>
      <v-checkbox class="mx-4" v-model="useIntegratedAuthentication" label="Use Integrated Authentication" ></v-checkbox>
      <div>
        <i class="far fa-eye"></i>
        <span>My eye here</span>
    </div>
    </div>
</template>

<style scoped>
  @import '../../node_modules/vuetify/dist/vuetify.min.css';
  @import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';
  @import 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css';
</style>

<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>
<script lang="ts">
import { VTextField, VCheckbox } from 'vuetify/lib';
import vuetify from '@/plugins/vuetify';
import Vue from 'vue';

export default Vue.extend({
  vuetify,
  components: {
    VTextField, VCheckbox
  },
  data() {
    return {
      showPass: false,
      password: '',
      useIntegratedAuthentication: false
    };
  }
})

</script>

Answer 1

找到可行的解决方案。安装组件后，您需要在脚本标签内加载字体：

mounted() {
  const css = `
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}`;

  // if our style is already injected we do not need to inject it a second time
  if (!document.getElementById('myCustomInjectedStyle')) {
    const head = document.head || document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    style.id = 'myCustomInjectedStyle';
    style.type = 'text/css';
    style.innerText = css;
    head.appendChild(style);
  }
},

我从来没有 material 设计用于复选框，所以我更新了我的 vuetify.ts 文件以始终使用很棒的字体。

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({
    icons: {
        iconfont: 'fa'
    }
})

Answer 2

全局使用 awesome 字体

添加你或project/public/index.html头标签

<link rel="stylesheet" ref="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

并在您的组件中使用他们站点的标签。喜欢 <i class="fab fa-adn"></i>

Font Awesome 无法在 Vue 构建的 Web 组件中呈现

Font Awesome not rendering in Vue built Web Component

build

web-component

font-awesome

vue.js