阿里巴巴图标库两种使用方式
阿里巴巴图标库网站: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";
}