[英]Rails 7: Font-awesome icons not showing
我有个问题。 在我的 Rails 7 应用程序中,我尝试使用 Font-Awesome 图标。 我已经安装了这个npm package 然后添加:
import "@fortawesome/fontawesome-free"
到我的app.ts
。 之后我检查了我放置这个图标的页面:
<i class="fa-solid fa-caret-down"></i>
但是图标没有显示。 进入检查器模式,我可以看到图标的高度和宽度为 0:0,所以安装一定有问题,也许我遗漏了什么。 我已经尝试安装 Font-Awesome gem,而不是 NPM,但这给了我关于 ESBuild 无法编译的各种错误。svg 文件和一些其他扩展。 我在这里安装缺少什么?
安装 gem font-awesome-sass
并运行bundle install
后,我在我的 app.scss 中添加了这样的导入语句:
@import "bootstrap/scss/bootstrap";
@import "font-awesome";
不幸的是,这会导致以下错误 output:
✘ [ERROR] [plugin sass-plugin] Can't find stylesheet to import.
╷
9 │ @import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
- 9:9 root stylesheet
/app/node_modules/esbuild/lib/main.js:1596
let error = new Error(`${text}${summary}`);
^
Error: Build failed with 1 error:
error: Can't find stylesheet to import.
╷
9 │ @import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
- 9:9 root stylesheet
at failureErrorWithLog (/app/node_modules/esbuild/lib/main.js:1596:15)
at /app/node_modules/esbuild/lib/main.js:1052:28
at runOnEndCallbacks (/app/node_modules/esbuild/lib/main.js:1468:61)
at buildResponseToResult (/app/node_modules/esbuild/lib/main.js:1050:7)
at /app/node_modules/esbuild/lib/main.js:1162:14
at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:697:9)
at handleIncomingPacket (/app/node_modules/esbuild/lib/main.js:752:9)
at Socket.readFromStdout (/app/node_modules/esbuild/lib/main.js:673:7)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12) {
errors: [
{
detail: undefined,
id: '',
location: null,
notes: [],
pluginName: 'sass-plugin',
text: "Can't find stylesheet to import.\n" +
'\x1B[34m ╷\x1B[0m\n' +
'\x1B[34m9 │\x1B[0m @import \x1B[31m"font-awesome"\x1B[0m;\n' +
'\x1B[34m │\x1B[0m \x1B[31m ^^^^^^^^^^^^^^\x1B[0m\n' +
'\x1B[34m ╵\x1B[0m\n' +
' - 9:9 root stylesheet'
}
],
warnings: []
}
我明白了:多么奇怪:)我就是这样的:
gem "font-awesome-sass", "~> 6.1"
bundle install
@import "bootstrap/scss/bootstrap";
@import "font-awesome";
和图标(FontAwesome 5.15.4 和具有 fas fa-something 的免费图标)以这种方式完美工作:
<i class="fas fa-search"></i>
但如果我想使用 unicode 图标作为::before 和::after 伪选择器中的内容,它们就不起作用。 在 codepen 上测试 font awesome 自己的代码并看到如果堆栈是免费的 font awesome unicode 图标不起作用后,我放弃了并为此目的使用引导程序图标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.