阿里云字体图标在vue-cli中的使用(笔记)
1. 这里只说在线引用的方式
fontclass的方式
第一步:拷贝项目下面生成的fontclass代码:
at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
放入到index.html中
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1323581_elqtsibv6ut.css">
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
Unicode的方式
在index.html页面中引入
第一步
在style标签中引入
<style>
@font-face {
font-family: 'iconfont'; /* project id 1323581 */
src: url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.eot');
src: url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.woff') format('woff'),
url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1323581_elqtsibv6ut.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
</style>
第二步 挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
参考阿里云官方的文档
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code