Uniapp 添加Iconfont

1:创建/font/iconfont.css

在线方式:

@font-face {
  font-family: "iconfont"; /* Project id 3266214 */
  src: 
	   url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype');
}

离线方式:

@font-face {
  font-family: "iconfont"; /* Project id 3266214 */
  src: 
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}

2:引用

App.vue中 添加

<style>
    @import './font/iconfont.css';
</style>

3:使用

<icon class="iconfont icon_ts "></icon>

设置大小

font-size:xxx

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值