微信小程序如何引用外部iconfont文件
发布/
小网
数据源/原创
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
近期接触开发小程序项目，不对原H5开发都是用阿里的iconfont制作小图标使用，想在小程序上继续延用。但是在实际过程中发现使用自己的外部域名时，在手机端上无法正常显示，但是引用iconfont官方提供的CDN地址可以正常显示。那么问题出在哪里？
通过HTTP请求分析发现有两个可参考的地方：
1. 允许任何跨域请求；
2. Content-Type为application/octet-stream
找到参考信息号，开始修改自己的Web服务器。
首先，只添加支持跨域请求配置。
location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;
access_log off;
expires max;
}修改配置重启后，发现在手机上还是不显示出来，继续增加header配置，配置如下：
location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
add_header Access-Control-Allow-Origin *;
add_header Content-Type application/octet-stream;
access_log off;
expires max;
}重新编绎小程序后，用手机端访问正常。
至此 DONE...
@font-face {
font-family: "basefont";
src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406'); /* IE9*/
src: url('https://yourdomain.com/static/v1.0/fonts/iconfont.eot?t=R18B0406#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://yourdomain.com/static/v1.0/fonts/iconfont.woff?t=R18B0406') format('woff'), /* chrome, firefox */
url('https://yourdomain.com/static/v1.0/fonts/iconfont.ttf?t=R18B0406') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('https://yourdomain.com/static/v1.0/fonts/iconfont.svg?t=R18B0406#basefont') format('svg'); /* iOS 4.1- */
}.icofont::before,
.icofont::after{
cursor: inherit;
font-family: "basefont";
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.nodata{
height: 400rpx;
}
.nodata::before{
content: "\e6b3";
font-size: 128rpx;
margin-top: 20rpx;
}
.moredata{
height: 88rpx;
}
.moredata.loading text::before{
content: "\e667";
margin-right: 6rpx;
display: inline-block;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation: icofont-spin 2s infinite linear;
animation: icofont-spin 2s infinite linear;
}