如何在Rails 7.0中使用Bootstrap图标？

Question

如何在Rails 7.0中使用Bootstrap图标？

6

我想在我的Rails 7.0应用程序中使用bootstrap-icons，但图标被折叠了。

它应该显示“加号”图标（这个图片在我的旧应用程序中）。

我还遇到了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"):

这里是我所做的步骤：

Created a new app by rails new my-app-name --css bootstrap
Ran npm i bootstrap-icons (then I got "bootstrap-icons": "^1.7.2" in my package.json)

Edited app/assets/stylesheets/application.bootstrap.scss like this:

  @import 'bootstrap/scss/bootstrap';
  @import 'bootstrap-icons/font/bootstrap-icons';
  @import 'custom';

Wrote erb like this:

  <%= link_to new_project_path, class: "btn btn-primary" do %>
    <i class="bi bi-plus" aria-hidden="true"></i>
    New Project
  <% end %>

Started my app by bin/dev

我阅读了这些页面，但无法解决错误。

- Junichi Ito

3个回答

2

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

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

- Elias Glyptis

0

你在 SCSS 文件中定义了 font-face 吗？

我在 import 之后添加了以下代码：

@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");
}

- Ben

谢谢您的评论，但我仍然遇到相同的错误。 - Junichi Ito

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Junichi Ito · Accepted Answer

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

运行以下命令：

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命令启动服务器，然后就会出现Bootstrap图标！

编辑

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

安装bootstrap-icons。

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"

编辑ERB。

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

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

但是我不确定Tailwind。