css - 在带有 Webpacker 的 Rails 6 中使用 Bootstrap 图标

标签 css ruby-on-rails twitter-bootstrap bootstrap-4 webpacker

我想在测试版“Bootstrap 的官方开源 SVG 图标库”中使用 Bootstrap 图标。 https://icons.getbootstrap.com/ .这适用于 Rails 6 中的 Bootstrap 4。

我尝试了各种导入并包含在 application.js 和 application.scss 中,但没有成功

我该如何做到这一点?

最佳答案

您也可以通过 CSS 使用它,我发现它对旧的字形图标支持很方便且熟悉。首先,添加 Bootstrap 图标:

yarn add bootstrap-icons
然后,只需将其导入您的 application.js文件:
import 'bootstrap-icons/font/bootstrap-icons.css'
最后,无论您想在哪里使用它,只需使用 <i>标签:
<i class="bi bi-plus-circle"></i>
应该是这样!

关于css - 在带有 Webpacker 的 Rails 6 中使用 Bootstrap 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60727460/

相关文章:

html - 我网页顶部的横幅重复

ruby-on-rails - Rails 3 - 'Couldn' t 解析 Yaml'

ruby-on-rails - Rails 地理编码器 "undefined method error"

c# - Bootstrap 在 ASP.NET 中使用 gridview 分页保存当前选项卡

html - 在使用 HTML/CSS 的导航栏中实现特定效果时出现问题

javascript - 加载页面时显示带视频的模态,可选择单击按钮打开相同的模态

css - Twitter Bootstrap - 最大限度地增强导航栏内容

mysql - 在 Rails 中组合多个模型

css - 样式化 Bootstrap 3 弹出框

html - Bootstrap 两个导航栏,辅助栏与主栏下拉菜单重叠