阿里云字体图标在vue-cli中的使用

阿里云字体图标在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">&#x33;</i>

参考阿里云官方的文档
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值