如何解决如何导入 Bootstrap5 字体图标以用于 Vue2 和树抖动?
我正在创建一个 Vue2 应用程序并想使用 Bootstrap5 图标。具体来说,我希望能够使用“图标字体”类型(即 <i class="bi-alarm"></i>
)而不是嵌入 SVG 元素。
所以,我已经像这样安装了 npm 包:
npm i bootstrap-icons
但是……现在呢? Bootstrap5 图标文档没有进一步说明。我需要安装 SASS 包吗?我应该创建一个 Vue 插件吗?或者,只是根据需要为每个组件导入图标?
我正在使用 Vue-CLI。
感谢您的建议!
解决方法
从@this answer 的 Anonymous 中得到提示,您需要从包中导入 CSS 才能使用 <i>
标签中的图标。
与从 CDN 导入的方式大致相同:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<div>
<p>This is an icon test:</p>
<i class="bi-alarm"></i>
<i class="bi bi-sunglasses" style="font-size: 5rem; color: blue;"></i>
<i class="bi-suit-heart-fill" style="font-size: 2rem; color: red;"></i>
</div>
...您应该能够通过以下方式将其从已安装的包本地导入到您的 main.css
文件(或等效文件)中:
@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');
此外,为了彻底,我会提到您需要使用 bootstrap-icons
v1.2.0 或更高版本才能将它们用作 <i>
标记中的字体。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。