一.图标库
1.1图标引用
图标引用可适用于移动端和web端,本文主要讲述web端的离线引用,其它平台可参考官方介绍.
1.1.1图标下载
图上红圈处的引用名称为了防止与本地项目中的其它引用冲突,可自行设置
  • 搜索并添加你需要的图标

  • 将图标添加到你的项目中

  • 进入刚才添加的项目,可以看到官方为我们提供了在线引用,但是为了减轻项目负载,我们这边使用本地引用.

  • 下载至本地并解压

  • 然后复制到项目中(assets文件夹中新建了一个icon文件夹);
    其中有一些demo和样例可以不用导入项目,但是为了给其他人一个参考最好全部拷入.

  • 打开icnfont.css文件,设置图标属性及引用标签.

.iconfont {
  font-family:"iconfont" !important;
  font-size:55px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//添加引用标签,icon-test为我们一开始新建项目时的FontClass/Symbol前缀
[class^="icon-test"], [class*=" icon-test"] {
  font-family:"iconfont" !important;
  /* 以下内容参照第三方图标库本身的规则 */
  font-size: 66px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//设置指定图标属性
.icon-test-icon-test10 {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

1.1.2页面引用

①在你的xxx.vue页面引入css文件和js文件

import '@/assets/icon/iconfont.css'
import '@/assets/icon/iconfont.js'
Unicode与Font class方式不支持多色图标;Symbol方式支持多色图标所以这边引入了js文件.图标详情及设置可去对应的.css文件修改.
<div>
    <i class="iconfont">&#xe615;</i>
    <i class="iconfont icon-test-icon-test2"></i>
    
    <el-button type="primary" class="icon-test-icon-test17" @click="" style="padding:6px 4px;width: 70px"></el-button>
    
    <el-button type="primary" class="icon-test-icon-test14" @click="" style="padding:6px 4px;width: 70px"></el-button>
    
    <i class="iconfont icon-test-icon-test10"></i>
    
    <svg class="icon-test-icon-test10" aria-hidden="true">
        <use xlink:href="#icon-test-icon-test10"></use>
    </svg>
    
    <svg class="icon-test-icon-test8" aria-hidden="true">
         <use xlink:href="#icon-test-icon-test8"></use>
    </svg>
</div>
  • Unicode 方式:
<i class="iconfont">&#xe615;</i>
  • Font class方式:
<i class="iconfont icon-test-icon-test2"></i>
  • Symbol方式:
<svg class="icon-test-icon-test10" aria-hidden="true">
    <use xlink:href="#icon-test-icon-test10"></use>
</svg>
  • 效果图:

1.1.3制作与上传
由于本人不是专业的UI,对图标制作这块并未做过多深入研究,想了解的朋友可以参考官网.

注:本文所有图标来源:阿里巴巴矢量图标库
Logo

前往低代码交流专区

更多推荐