微信小程序导入字体图标

最新推荐文章于 2024-07-15 22:46:08 发布

小火车况且况且

最新推荐文章于 2024-07-15 22:46:08 发布

阅读量446

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_43972992/article/details/104612655

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

微信小程序导入字体图标

1. 导入到本地

在微信小程序中使用IconFont阿里巴巴矢量图标库的字体图标
首先在该网站下载好对应的字体图标
找到该文件
删除多余的兼容性处理的代码

最后得到的文件就是目标文件

将文件拷贝到微信小程序项目中，之后修改文件的后缀为.wxss
最后导入到app.wxss作为全局的字体图标
如果在使用了自定义的组件需要在组件中设置addGlobalClass: true属性或者在自定义组件的wxss中重新导入iconfont.wxss文件官方说明
```
Component({
	options: {
		addGlobalClass: true
	}
})
```

2. 使用线上地址导入

首先选择线上地址
将生成的连接复制到浏览器地址中
选中所有代码，在小程序中新建一个iconfont.wxss文件

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1746725_sczh984tkd.eot?t=1586505428034'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1746725_sczh984tkd.eot?t=1586505428034#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABnAAAAJ9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4gQMBNgIkAwgLBgAEIAWEbQcyG6sFyK6wKcO9SJGmbEBxhp3Rcwd1w+Ejgmi/3+y7+4pJUm8klSSayCQapUCCUiiZ0oniJbyrudz/L5BQvOOfZZEVQmAv4ctsNoXxnQpD9oUrCFNZRcK0wlXytDOKwte6CLIsziTLXpAPX7B0IDPY+bpymBpbAtSCF+C/T9w7/RPog7QeUI570ViTJnUBdXEgBbgXtsnKJPGGsQte4HkCTUOKcruzy2vQJrOnBeLWcwxoK/hlmaXqQrVhbRZPKurFQ/ECj9H341892ihUErvi5GbGhvGvCycjuZLrgBAgoM0VJCwAmbhojB8pCMYVNONNxsCxSoMvXw5s4qhmwf46u7gVDEDJM0k92aOmCnisvkaBxUkPIEb1+tXpdGfzpjdqblzvideOLksl61uXdbG6/TM/erQYu4e6nroHXyMz+18fbi0GGYDev1VP1C8sd/U82Dx2hHGA8tRIAnII3sbzf9ghv+owg9d7UDShPEMaAVDfqyP4O9KBLdmQ29Yia9LGzsLoWauamihhd7ePqYa+W0mHur4JzprBDEndBJnZBVS0WEJV3Qaa5s1tbtGDFURuYM45QOh0i0K7FySdnsnMvqOi3yeqOqOApqtAe7aYCq9DMRlCNppn6Fk6Vq5dOuLSFXKy0OC8POJtEKdeCGvlajk1RzHxEgvSY6cuolCxjnAWXEZhqDFh7ZMlZVckGaxUVNObypaOoMMORgyC2JDpDPJYtJgKuouOyudXEEcmZOCOprr4BsJS3uCopqw6gJzTxIOaHuWa1DFHnRAKUpgWQbNgFAmFNJQ0j/IRiyhzJ0QTgypOOzVUU95eF/3dHmiyjUU4w5P6naszy4gdAA==') format('woff2'),
  url('//at.alicdn.com/t/font_1746725_sczh984tkd.woff?t=1586505428034') format('woff'),
  url('//at.alicdn.com/t/font_1746725_sczh984tkd.ttf?t=1586505428034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1746725_sczh984tkd.svg?t=1586505428034#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang:before {
  content: "\e687";
}