vue项目中字体图标的使用

阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库

1.选择你所需要的图标添加到购物车, 可以添加多个

 2.点击购物车

 3.选择添加到项目,点击确定

4.选中Font class

 5.选中下载至本地

 6.文件进行解压放到项目文件中

7.复制标签别名(注意不要把点号复制进去了)

 

 8.组件中的使用，可以写CSS样式对字体图标进行修改

tip:1.在使用图标的时候一定要在页面style里面进行引入。

2.标签可以使用任何标签。需要注意的是里面要用class=“iconfont ‘标签别名’”

<!--  -->
<template>
 <div>手机图标:<i class="iconfont icon-iconfontshouji"></i></div>
 <div>个人主页图标:<i class="iconfont icon-iconfontxingxing"></i></div>
</template>

<script setup lang='ts'>

</script>

<style  scoped>
@import url('@/style/icon/iconfont.css');
.icon-iconfontshouji {
  font-size: 30px;
  color: pink;
}

</style>

最后效果