Vuetify Font 很棒的 SVG 集成问题答案

【问题标题】：Vuetify Font awesome SVG integration problemVuetify Font 很棒的 SVG 集成问题
【发布时间】：2020-12-01 19:36:48
【问题描述】：

我正在尝试从 vuetify 中获取组件。我正在使用 fontawesome svg 图标，并且我遵循了有关安装页面的文档。这是我注册它的方法：

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas, faBell } from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(fas, faBell); // Include needed icons

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "faSvg",
  },
});

但是当我使用这样的代码时：

 <v-icon>fas fa-bell</v-icon>

对于显示图标它不起作用。我通过使用 font-awesome-icon 组件让它工作，但我想使用原生 vuetify v-icon 组件。

你们知道可能是什么问题吗？

谢谢。

【问题讨论】：

我想知道是否仅将 faBell 添加到库中会有所改变？那将是实际的图标。

标签： vue.js svg icons vuetify.js font-awesome

【解决方案1】：

您的<head> 中似乎缺少链接。如果您阅读Vuetify docs，您会看到：

开始使用 FontAwesome 的最简单方法是使用 cdn。在你的主要 index.html 的头部放置这个 sn-p： <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

即使它没有为 SVG 版本指定相同的内容，我也只能通过将该链接添加到我的 <head> 来使其工作。

【讨论】：