0
点赞
收藏
分享

微信扫一扫

vue 使用iconfont图库

雨鸣静声 2022-01-13 阅读 55
vue.js前端

项目中如何使用iconfont(阿里图标库)
一. 登陆iconfont官网:
https://www.iconfont.cn/

二. 创建一个图标项目
1.点击“图标管理”子目录中的子目录“我的项目”,进入个人图标项目

在这里插入图片描述

 

2. 点击创建一个图标项目

在这里插入图片描述

 

三. 将需要的项目加入到购物车中
搜索需要的图标

在这里插入图片描述

 

 

选择图标,点击加入至购物车

在这里插入图片描述

 

 

四. 将购物车中的图标加入至所创建的图标项目中
点击购物车,进入查看所添加的图标

在这里插入图片描述

 

2.点击添加至项目

在这里插入图片描述

 

3.选择目标项目,点击确定

在这里插入图片描述

 

4.添加完成

五. Vue 项目中使用图标

main.js中导入

//导入图片库
import "@/assets/iconfont/iconfont.css"


组件中使用

<template>
  <div class='likebar'>

      <span class="item">
         <i class="iconfont icon-dianzan"></i>//使用

         {{video_info.thumbsup}}
        </span>
      <span class="item">
        <i class="iconfont icon-shoucang"></i>
        {{video_info.tnum}}
        </span>
      <span class="item">浏览量 {{video_info.vnum}}</span>
      <span class="item">转发</span>

  </div>
  
</template>

效果:

 注释:不能一次下载所有的图标,只能在项目中下载自己选定的图片,所以如果想再加图标 需要在iconfont的项目中重新下载,导入。个人感觉有点麻烦,但是也不算特别麻烦。可能是我的方法有些许问题。可能是iconfont图库图标太多,一次性导入所以文件太大。

参考文章:inconfont vue的使用

举报

相关推荐

0 条评论