前端阿里云iconfont 字体图标正确使用方法

效果图

https://www.iconfont.cn/home/index  添加图标至项目

我的项目 font class 下载至本地

https://transfonter.org/ 网站转码

/**
 * 1. 点击add fonts 上传 下载至本地的iconfont.ttf文件
 * 2. 勾选 Base64 encode
 * 3. 点击 convert 转换
 * 4. 点击 download 下载 (此下载按钮需要以上步骤完成才能出现)
 * 5. 解压下载文件把stylesheet.css 即 @font-face 部分放入项目
 * 6. 返回 我的项目 font class  复制代码为class属性 点击编辑获取 Unicode(16进制)e64b
 * 首页  复制代码为 icontupian 编辑获取Unicode(16进制)为e604  本文件使用 .icontupian:before { content: "\e604";}
 */

@font-face {
    font-family: 'iconfont';
    src: url('data:application/font-woff2;charset=utf-8;base64,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') format('woff2'),
        url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.iconfont {
	display: inline-block !important;
	font-family: "iconfont" !important;
	font-size: 40rpx;
	color: #FF7E98;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icontupian:before {
	content: "\e615";
}
.iconadd:before {
	content: "\e664";
}
.iconscss:before {
	content: "\e688";
}
.iconweizhi:before {
	content: "\e60b";
}
.iconcanshushezhi:before {
	content: "\e65a";
}
.iconjs:before {
	content: "\e93e";
}

使用案例:

<view class="iconfont icontupian"></view>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sun_lz.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值