vue使用iconfont图标

 1.首先找到想要添加的图标选择添加到购物车

编辑

2.选择添加到项目

编辑

3.点击生成在线链接

编辑

4.复制之后，粘贴到index.html下

编辑

代码：

<link
      rel="stylesheet"
      type="text/css"
      href="//at.alicdn.com/t/c/font_4798083_c2xog3ud23.css"
    />

这样就会把图标添加到图标库就可以使用<i>来使用这个图标

在使用页面添加这段代码：

.iconfont

.iconfont{
  font-size: 20px;
  color: #6b7ca7;
  display: inline-block;
  &:hover{
    color: #2a7aff;
    transform: scale(1.2);
  }
}

是配置未点击的颜色以及点击以后的颜色

复制icon代码：

编辑

使用代码（添加到class里）：

编辑

<el-menu-item index="/all/themeManager" style="margin-left: 3px;" >
                  <i class="iconfont icon-yingyong" style="margin-right: 12px;"></i>
                <span>应用主题查看</span>
              </el-menu-item>

记得class里要加上iconfont

展示：

编辑

编辑