在 Vue3 中使用 Font Awesome 和 Bulma

Posted 2023-02-22

【中文标题】在 Vue3 中使用 Font Awesome 和 Bulma

【英文标题】：Using Font Awesome in Vue3 with Bulma

【发布时间】：2021-05-30 15:47:39

【问题描述】：

Font Awesome 应该如何与 Vue 一起使用？我在我的项目中添加了vue-fontawesome，以及Bulma，所以我应该将两者混合吗？还是选择其中之一？我希望能够使用 Bulma 的类为图标着色。

Vue-fontawesome 显示使用此语法：

<font-awesome-icon icon="address-card" />

和Bulma 显示使用此语法：

<span class="icon">
  <i class="fas fa-home"></i>
</span>

问题：

如果我应该将两者混合，html 语法应该如何？ 如果我只能选择其中一个，那么每个选项的限制是什么？

【问题讨论】：

你解决过这个问题吗？如果是这样：回答您自己的问题对其他有相同问题的人很有用。如果没有：也许考虑展示一些您的尝试和可能的错误消息等。

【参考方案1】：

<font-awesome-icon> 只是一个便利组件。当您检查生成的 HTML 时，您会发现它呈现为 <i class="fas fa-home"></i>。

上面的陈述当然是非常简化的。在我的项目中，我使用的是 SVG 图标，因此 <font-awesome-icon> 将呈现为 <svg>...</svg>。

Bulma 的 HTML 提供了一个容器，可以将任意图标放入其中。这可以是 Font Awesome，但也可以是其他东西。它只是提供布局。

考虑到这一点，我会回答你的问题：

只需将图标（Font Awesome）放入容器（Bulma）中

<span class="icon">
  <font-awesome-icon icon="address-card" />
</span>

为了给图标着色，Bulma 的助手工作得很好：

<span class="icon has-text-danger">
  <font-awesome-icon icon="exclamation" />
</span>

不适用，因为它们都有不同的用途并相互补充。

【参考方案2】：

安装Font Awesome package

npm install --save @fortawesome/fontawesome-free

然后加载它的 CSS 文件

import '@fortawesome/fontawesome-free/css/all.min.css'

全局加载示例

// Vue.js 3
import  createApp  from 'vue'
import App from './App.vue'
import "bulma/bulma.sass"
import '@fortawesome/fontawesome-free/css/all.min.css'

createApp(App).mount('#app')

这是一个 Vue 3 示例，但如果遵循相同的步骤，它在 Vue 2 应用程序上的工作方式应该相同。

【讨论】：

OP 提出了不同的问题。