如何将超棒的字体添加到 Rails 7（jsbundling）？

Question

抱歉，这个话题已经被讨论过很多次了。但是，我刚刚使用 esbuild 创建了一个新的 Rails 7 应用程序，将 font-awesome-sass 添加到 gem 文件，创建了 application.css.scss（已经有 application.bootstrap.scss）并放置“@import 'font-awesome'; “在那里。

然后我将以下内容添加到视图页面：

      <i class="fa-sharp fa-solid fa-house"></i>
      <%= icon 'fa-brands', 'font-awesome' %>

没有页面错误，没有控制台错误---但是，图标在页面上不可见（代码在源代码中）。我一直在盲目地试图解决这个问题---但是，无法弄清楚为什么这不起作用。

我错过了什么步骤吗？

我已经验证了 gem 的安装说明，我还尝试跳过 gem 并通过 yarn 安装 fontawesome。视图中没有显示任何图标。

Answer 1

因为你使用的是 esbuild，所以你可以使用 npm 安装 fontawesome

yarn add @fortawesome/fontawesome-free

并将其导入您的 javascript/application.js

import "@fortawesome/fontawesome-free/js/all";

记住只使用免费图标，fa-sharp 不是免费的

Answer 2

我刚试过 this 一切都很好，你能试试吗？

更新的步骤：

1. 用cmd创建项目

   rails _7.0.4_ new demo-rails-with-react-frontend -j esbuild

2. 在this
之后添加字体真棒
3. 创建组件以测试以下this

---

结果（下图）

我的档案

app/javascript/components/application.tsx

：

import * as React from "react";
import * as ReactDOM from "react-dom";

interface AppProps {
  arg: string;
}

const App = ({ arg }: AppProps) => {
  return <i class="fa-solid fa-house"></i>;
};

document.addEventListener("DOMContentLoaded", () => {
  const rootEl = document.getElementById("root");
  ReactDOM.render(<App arg="Rails 7 with ESBuild" />, rootEl);
});

环境

• 红宝石 3.0.4
• 轨道 7.0.4
• font-awesome-sass 6.2.0

Answer 3

由于我们使用的是 Rails 7，我们不喜欢 sass，因为安装很烦人，在这里我想出了如何使用 tailwindcss + propshaft 获得 fontawesome 作品

安装包

# install package
$ yarn add @fortawesome/fontawesome-free

导入 fontawesome css

@import "tailwindcss/base";
@import "./base.css";

/* import fontaweseome css */
@import "@fortawesome/fontawesome-free/css/all";

@import "tailwindcss/components";
@import "./components.css";

@import "tailwindcss/utilities";

复制字体到供应商文件夹

# copy fonts
$ mkdir -p vendor/assets/fonts/fontawesome
$ cp -r node_modules/@fortawesome/fontawesome-free/webfonts/ vendor/assets/fonts/fontawesome

安装 postcss-replace 插件

# install postcss-replace to replace fontawesome static font path from css
$ yarn add -D postcss-replace
$ touch postcss.config.js

使用 postcss-replace 替换字体路径

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    // replace url("../webfonts/ to url("./fontawesome/
    'postcss-replace': {
      pattern: /url\("\.\.\/webfonts\//,
      data: { replaceAll: 'url("./fontawesome/' }
    },
    autoprefixer: {},
  }
}

用 postcss 构建 tailwindcss

"build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"