Laravel + Bootstrap 图标

Question

我通过命令行向我的 Laravel 8 项目添加了 bootstrap-icons

npm i bootstrap-icons

我之前已经运行过

npm install

和

npm run dev

来启用 Laravel/UI。

但是当我尝试插入一个简单的图标

<i class = "bi bi-alarm"> </i>

时，它没有显示。

Answer 1

编辑文件：resources/sass/app.scss并添加：

// Bootstrap-icons
@import '~bootstrap-icons/font/bootstrap-icons.css';

然后重建：

$ npm run dev

Answer 2

对于 Laravel 10

安装引导程序图标：

sail npm i bootstrap-icons

然后更新你的 vite-config 并添加解析部分：

plugins: [
    ...
],
resolve: {
    alias: {
        '~bootstrap-icons': path.resolve(__dirname,'node_modules/bootstrap-icons'),
    }
}

现在我们可以在 app.scss 文件中添加引导图标：

@import '~bootstrap-icons/font/bootstrap-icons.css';

最后我们要构建：

sail npm run build

现在您可以通过以下方式在 html 中使用引导图标：

<i class="bi bi-person-fill"></i>

如果您不使用 sail，您可以在没有“sail”部分的情况下运行它，并且应该使用

npm run dev

重建并使用该应用程序。

Answer 3

通过运行以下命令安装引导程序图标：
```
npm install bootstrap-icons
```
检查图标是否已安装：
```
npm list bootstrap-icons
```
如果未安装，您应该获得一个版本 bootstrap-icons 未安装，请使用第一步中的纱线或命令重试安装。
将此导入语句添加到您的 resources/sass/app.scss
```
@import 'bootstrap-icons/font/bootstrap-icons.css';
```
```
npm install
```
```
npm run dev
```
```
npm run watch
```
现在您只需在 view.blade.php 中使用标签
```
<i class="bi bi-0-circle"></i>
```
或在 bootstrap Icons
上搜索图标即可使用图标

8.如果您收到与 vite.config.js 相关的错误，请确保将此添加解决

    alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
        '@': '/node_modules',
    },
},```