vue中引入阿里巴巴图标库

阿里巴巴图标库网站：www.iconfont.cn/

阿里巴巴图标库两种使用方式:

(1)下载到本地引入使用

(2)http形式使用

一、 下载到本地引入使用

1、进入网站搜索需要的图标

2、找到自己需要的图标加入购物车

3、点击购物车图标，添加到项目，没有项目可以创建项目

4 、点击下载至本地

5、下载到本地之后

如图所示，下载完之后有八个文件，我们只需要拿出ttf、woff、woff2以及iconfont.css 放至自己文件中即可。

6、修改iconfont.css

源码

@font-face {
  font-family: "iconfont"; /* Project id 4397349 */
  src: url('iconfont.eot?t=1704428344289'); /* IE9 */
  src: url('iconfont.eot?t=1704428344289#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1704428344289') format('woff2'),
       url('iconfont.woff?t=1704428344289') format('woff'),
       url('iconfont.ttf?t=1704428344289') format('truetype'),
       url('iconfont.svg?t=1704428344289#iconfont') format('svg');
}

修改为

@font-face {
  font-family: "iconfont";
  /* Project id 4397349 */
  src:
    url('iconfont.woff2?t=1704428344289') format('woff2'),
    url('iconfont.woff?t=1704428344289') format('woff'),
    url('iconfont.ttf?t=1704428344289') format('truetype'),
}

7、在main.js中引入iconfont.css

import './assets/font/iconfont.css'

8、在组件中进行使用

<span class="iconfont icon-youjiantou"></span>

二、 http形式使用

---

按照方法一方法走到第四步
点击【查看在线链接】

复制生成的代码，在样式中使用

@font-face {
  font-family: 'iconfont';  /* Project id 3725671 */
  src: url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.woff2?t=1668507209713') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.woff?t=1668507209713') format('woff'),
       url('https://at.alicdn.com/t/c/font_3725671_drcfelqiw37.ttf?t=1668507209713') format('truetype');
}

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

.icon-xinxi:before {
  content: "\e763";
}

.icon-sousuo:before {
  content: "\e651";
}

.icon-zanting:before {
  content: "\e613";
}