如何使用带有Rails 7.0的引导图标？

Question

我想在我的Rails 7.0应用程序中使用引导图标，但是图标是折叠的。

​

​

它应该显示“加号”图标(这张图片在我以前的应用程序中)。

​

​

我还得到了ActionController::RoutingError。

08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1  |   
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):

以下是我所做的步骤：

rails new my-app-name --css bootstrap创建了一个新的应用程序

1. 运行npm i bootstrap-icons (然后在我的npm i bootstrap-icons中找到了"bootstrap-icons": "^1.7.2"

1. 像这样编辑了app/assets/stylesheets/application.bootstrap.scss：

@导入‘引导/scss/引导’；@导入‘引导-图标/字体/引导-图标’；@导入‘自定义’；

1. 这样写erb：

<%= link_to new_project_path，类："btn btn-主“%>新项目<% end %>

bin/dev启动我的应用程序

我读了这些页，但无法解决错误；

• https://icons.getbootstrap.com/#usage
• https://github.com/rails/cssbundling-rails/issues/22
• https://github.com/rails/sprockets-rails/pull/476

Answer 1

我不确定这是否是最好的解决方案，但它对我有效。

运行这些命令；

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

将这一行添加到app/assets/stylesheets/application.bootstrap.scss中。

@import "bootstrap-icons/font/bootstrap-icons";

在package.json中像这样编辑"build:css“脚本。

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

使用bin/dev命令启动服务器，然后出现引导图标！

​

​

编辑

我找到了更简单的解决方案。

安装引导图标。

npm i bootstrap-icons

将这一行添加到app/assets/stylesheets/application.bootstrap.scss中。

@import "bootstrap-icons/font/bootstrap-icons";

编辑config/initializers/assets.rb。

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

使用bin/dev命令启动服务器。就这样!

EDIT2

--我正在FontAwesome和Tailwind中尝试一种类似的方法。但是，在我的浏览器中找不到字体。例如：http://localhost:4000/webfonts/fa-solid-900.woff2。您能够共享与引导字体一起使用的示例路径吗？谢谢。

我可以像这样使用FontAwesome：

安装npm。

npm install --save @fortawesome/fontawesome-free

将以下一行添加到app/javascript/application.js中。

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

编辑再培训局。

<i class="fas fa-arrow-right"></i>

使用bin/dev命令启动服务器。

​

​

但我不确定泰尔风的事。

Answer 2

您是否在scss文件中定义了字体面板？

这个在我的进口货下面

@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

Answer 3

在application.scss中，您可以简单地导入

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");