vue中引用bootstrap-icons图标

2023年12月26日 15:18 by wst

vue

---

在网页编程当中，经常用到一些图标，但是这些图标从哪里可以获取呢？

常用的（免费）渠道：

1. 阿里的图标库：iconfont-阿里巴巴矢量图标库

2. bootstrap的图标：Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库 (bootcss.com)

由于阿里图标库需要手动下载后引用。

这里介绍下bootstrap-icons图标的使用方法

1. 创建vue项目，具体方法参见：vue项目创建步骤-scott博客 (easytolearn.cn)

2. 安装：

npm i bootstrap-icons

3. 引用：

在main.js中添加一行：

import "bootstrap-icons/font/bootstrap-icons.css";

在vue文件中引用，如下实例引用了github的头像：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <span>直接引用：</span>
    <i class="bi-github" role="img" aria-label="GitHub"></i>
    </div>

    <div>
      <span>伪元素引用：</span>
      <span class="bi-github">GitHub</span>
    </div>
  </div>
</template>

以上代码分别列举了直接引用和伪元素引用。

总结

这篇文章对于大神来说，可能已经司空见惯了。

但是对于小白，却是起到了很大的帮助作用。

希望能帮助到更多的人！

 

 

---