阿里巴巴图标库的使用

要秃头的海绵宝宝

已于 2023-01-11 16:37:24 修改

阅读量2.3k

点赞数

文章标签：前端 css html

于 2022-11-15 18:29:08 首次发布

本文链接：https://blog.csdn.net/m0_37751401/article/details/127869059

版权

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

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

【一】、下载到本地引入使用
【二】、http形式使用

一、下载到本地引入使用

1、进入网站搜索需要的图标
在这里插入图片描述
2、找到自己需要的图标加入购物车

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

4 、点击下载至本地

在首页【资源管理】-【我的项目】，也可看到如上图所在位置

5、下载到本地之后拿出ttf、woff、woff2以及iconfont.css
放至自己文件中
在这里插入图片描述

6、将css引入页面
在这里插入图片描述

7、进行使用
在这里插入图片描述

*注意引入路径

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

二、 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";
}