首先打开iconfont阿里巴巴矢量图标库:https://www.iconfont.cn/
找到自己心仪的字体图标加入购物车
可以直接下载或者添加至项目。
下载完解压缩,把解压缩后的文件放到你的项目中:
打开Demo里面有三种引入方式:Unicode、Font class、Symbol
具体区别Demo里面都有详细说明。
Unicode引入
下面是Demo里的。
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
注意url路径
这是我在自己使用时的路径
@font-face {
font-family: 'iconfont';
src: url('fonts/iconfont.eot');
src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('fonts/iconfont.woff2') format('woff2'),
url('fonts/iconfont.woff') format('woff'),
url('fonts/iconfont.ttf') format('truetype'),
url('fonts/iconfont.svg#iconfont') format('svg');
}
然后就是使用iconfont样式了
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
最后获取相应图标字体编码,应用于页面。
<i class="iconfont">㑋</i>
在使用方式:
在里面创建一个项目将购物车里的图标添加值项目。