zoukankan      html  css  js  c++  java
  • vue项目中icon图标的完美引入

    第一步:

    进入阿里矢量图标库并登录 地址:https://www.iconfont.cn

    第二步:

    选择项目需要的图标添加到库

    第三步:

    选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建一个(按钮都在同一个页面)

    第四步:

    添加到项目后,在弹出的页面修改项目防止icon命名与自己的UI框架(如elementui)冲突

    在   更多操作-》编辑项目  下(设置字体的前缀:fontClass/Symbol 前缀)

    第五步:

    修改完成项目后进行选择css并下载下来

    第六步:

    在你的vue项目assets文件夹下面创建icon文件夹,把下载的压缩包解压的文件复制到icon文件夹下面(当然demo等不需要的文件按你的需要删除)

    注意:(根据评论意见)本步骤操作也可以放在static静态文件下,由于不会打包处理,在index.html的总入口文件引入即可。

    第七步:

    打开iconfont.css在icon样式行添加第四步设置的前缀样式关联

    代码:,[class^="el-icon-zz"],[class*=" el-icon-zz"]  //注意第二个el-icon-zz前面有个空格

    第八步:

    在main.js当中引入使用(全局的),局部的在需要的引入即可(路径填对)

    第九步:

    在需要的vue页面使用即可:

    最终效果:

  • 相关阅读:
    实验二、作业调度模拟实验
    实验一
    0909 初识操作系统
    实验四、主存空间的分配和回收模拟
    12.27评论5位同学试验三
    实验三进程调度模拟程序
    实验二、作业调度模拟实验
    实验一报告
    实验四 主存空间的分配和回收模拟
    实验三 进程调度模拟程序
  • 原文地址:https://www.cnblogs.com/zhaozhou/p/10248949.html
Copyright © 2011-2022 走看看