在vue中如何使用字体图标(阿里巴巴)

在vue中如何使用字体图标(阿里巴巴)

1.选择需要的图标加入购物车。
2.打开购物车，添加至项目。
3.点击生成在线代码

4.点击下载至本地，放入需要文件夹下，可以放入assets下。
5.在style中引用

<style lang="less" scoped>
@import '../assets/font/iconfont.css';
@font-face {
  font-family: 'iconfont'; /* Project id 2845322 */
  src: url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.woff2?t=1632973283986')
      format('woff2'),
    url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.woff?t=1632973283986')
      format('woff'),
    url('//at.alicdn.com/t/font_2845322_xevu5vdk5nn.ttf?t=1632973283986')
      format('truetype');
}
</style>

①@import 引入字体样式。
② @font-face 刚刚生成的代码，复制到此处即可。
6.使用字体图标

        <i class="iconfont con">&#xe8c8; </i>

 .con {
        font-size: 25px;
        margin-left: 40px;
        cursor: pointer;
      }
      .con:hover {
        color: #ccc;
      }

• con可以改变字体图标的样式