欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用iconfont彩色图标

程序员文章站 2022-03-15 13:11:24
...

概述:采用下载至本地导入,然后在前端代码里引用这个js。

步骤:

1、找到需要的图片,点击“添加入库”

使用iconfont彩色图标

2、可以添加到项目

使用iconfont彩色图标

3、选择Symbol,下载到本地

使用iconfont彩色图标

4.在本地下载路径中解压,将iconfont.js复制到项目src/assets路径下

使用iconfont彩色图标            ------>           使用iconfont彩色图标

5.在<style>加入通用css代码(引入一次就行):

<style>
.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

6.挑选相应图标并获取类名,应用于页面.注意:在xlink:href="#"后面接的就是自己的图标的font-class,比如我这里的图标就是icon-lajitong。可以通过下图的“复制代码”得到,或者图标下面有写。

<div>
  <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-lajitong"></use>
  </svg>
</div>

 使用iconfont彩色图标使用iconfont彩色图标