1、使用方法：将标阿里云图下载下来，并将压缩包中的字体图标.css文件中的代码拷贝到小程序中的wxss中，建议放在自己代码的最后，方便管理。css文件太大，还是不建议使用，选择将图片放在后台服务器，然后去请求要方便得多。
2、添加渐变色需要三条代码即可搞定，同css3一致（毕竟都是相互模仿），代码如下：
（1）、通过CSS3实现背景色渐变效果。这里是从左下角至右上角的线性渐变。
background: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362);
（2）、规定背景的绘制区域为文字部分。之前接触过的background-clip有下面几种取值：background-clip: border-box（默认）｜padding-box｜content-box;意思分别是，背景被裁剪到边框盒 | 背景被裁剪到内边距框｜背景被裁剪到内容框。
-webkit-background-clip: text;
（3）、文字填充颜色。
＊这里注意一定要定义为transparent，否则会覆盖底部的背景色。
这里使用了-webkit-前缀，Chrome和Safari能够正常使用，经测试新版firefox也能正常使用。所以，如果有兼容性需求，这种方式就要谨慎使用了。
-webkit-text-fill-color: transparent;
3、上效果图片，如下图：
image.png
image.png
4、上所有代码：布局是rem弹性布局，可参考（不足的地方还望大佬些指教）
wxml代码：
<!--pages/caseQuery/caseQuery.wxml-->
<view class='header'></view>
<view class='contain' style='height:{{winHeight*360/1206}}rpx'>
<view class='commonStyle' >
<!-- 住宅 -->
<view class='boxStyle 'style='height:{{winHeight*350/1206}}rpx'>
<view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='residenceEvent'>
<view class='iconfontResidence icon-residence smallIcon'></view>
<view class='font'>住宅</view>
</view>
</view>
<!-- 商铺 -->
<view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
<view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='shopeEvent'>
<view class='iconfontShope icon-shope smallIcon'></view>
<view class='font'>商铺</view>
</view>
</view>
</view>
<!-- 工业用地 -->
<view class='commonStyle'>
<view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
<view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='industryEvent'>
<view class='iconfontIndustry icon-industry smallIcon'></view>
<view class='font'>工业用地</view>
</view>
</view>
<!-- 土地 -->
<view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
<view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='landEvent'>
<view class='iconfontLand icon-land smallIcon'></view>
<view class='font'>土地</view>
</view>
</view>
</view>
</view>
<view class='footer'></view>
wxss代码
/* pages/caseQuery/caseQuery.wxss */
page {
background-color:#f9f9f9;
}
.contain {
margin-top:27%;
}
.commonStyle {
display:flex;
margin-top:2%;
}
.boxStyle {
flex:1;
height:350rpx;
/* 弹性居中 */
display: flex;
justify-content:center;/*水平居中*/
align-items:center;/*垂直居中*/
}
.blockStyle {
width:80%;
box-shadow: 0 10rpx 100rpx #ccc;
display:flex;
flex-direction: column;
cursor: pointer;
}
.smallIcon {
flex:2;
/* 弹性居中 */
display: flex;
justify-content:center;/*水平居中*/
align-items:flex-end;/*垂直居中*/
}
.font {
flex:1;
text-align:center;
}
/* 住宅图 */
@font-face {font-family: "iconfontResidence";
src: url('iconfont.eot?t=1567585609389'); /* IE9 */
src: url('iconfont.eot?t=1567585609389#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABnQAAAJ7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp8gQcBNgIkAwgLBgAEIAWEbQcxG64FyC4xFRnprgQSy24cN8JrNX2Xg3fCLx/i4fu113Pfvv3ZAJOLZ01UdFEVplG1REZ0KgyBkRWGZcf/o7U2J+8JPG4Cf4uI+8nsie8tmjw0QnuSpwIhQmh4/hcONKi3e71+krLE1AYdLZUKINTnuZzeBDqQu+oD5bgXjTVpUi/AOKBA98A2WQEFFnnD2AUv8DSBJmM6CDtjMyuQltmTAnHHMhRIF4KyzDKVUGtYmcUzCVW6n16Bp9Hn459ypEnKgl2zfzmqw8DPnJzO6+ewExBCIKD1JQqsAJk4bkzukgTjJE1J2RQ4VmXwMwKHOKpVsL/OLm8BI1D2THJP8ajfTCCjxCSwOulBlO25lvPdrHSpi9kHrxuhKi7esFax5TbmqJ5bzYlN19Hj1mhKbI3ODE9vpxqkVPTnZ/euPn7n7O6/P5V7uPXV20X/dwwA1Ev/TYGA4Mltlf32nqtcBj9uMvLXyzDMDar9uoL/Ix/YkQ2lbU9Zkzdmk0mJ89Y1aUId9nb5mGrqvZlsqPTekrvBaIZCZYbM7ApKzdZQU1lHk2Xj65t1YySRG7HkBiB0eEHS5isKHd7IzL6j1OcTNR0hoclp1OzYbC6s7DBDhaNO1FNiaYFPXSfPxpVLaBy6CssrI34NWWxFSClfLGfG0Ue2xJz4yChzTgllgUfGwHnougEJWWCjxvMm52FXoUCbXpTXAg+ytjFIwSEdoTpFWDQBHw16c9nK+5cgwyGXgnW01aXXICZmDU6U5BUHkOM6f1Dbo1wSO2Io4ziKoJiAhxgDw5DLFSDC5mE2pOHyzAnxUJeC040O1eW3N3h/tw+a2OYUTk6h4co8dAOKBQAAAA==') format('woff2'),
url('iconfont.woff?t=1567585609389') format('woff'),
url('iconfont.ttf?t=1567585609389') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567585609389#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfontResidence {
font-family: "iconfontResidence" !important;
font-size: 120rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-residence:before {
content: "\e62d";
background: -webkit-linear-gradient(left bottom, #fb2c61 , #f79d29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 商铺 */
@font-face {font-family: "iconfontShope";
src: url('iconfont.eot?t=1567585663653'); /* IE9 */
src: url('iconfont.eot?t=1567585663653#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKoAAsAAAAABlAAAAJbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApYbQE2AiQDCAsGAAQgBYRtBzEblAUR1Ytnsq+TN8V20mMjFAQTbivGSbjZ3+JmGw6tOlidLWdHfFTZz0QQjf1v9m6/uNMgiVozTVSyJiiNSIiERBWNYiG/o3MftWjCahpwlP4LbYSHOqQtTpfhqFFBmD3HFHx/fU/anZuGl22WzA0Q7V0PNuDw1TNZcAAc7WqpDACf53J6E+hA7qoPlNPeNNbko16A8dbA9sQosiKJvGHsghf4mEC7aZvE/vn4eUqyVwXioblzjSpEpWSFVqG54WCKV7jW8qIMvIy+H3+VoSiaKrvl9O0DN00/OCX0bfQICDEkoONNqNiEJM43Zk+ignFV+2lmHikFP/zHHnFUp2B/nV3fCSah6pnUnuZR6wtIOD6C6UmXkdmd8ThEfVeSLVzAKT0VXtBRr7q4y9aBzaHeuxmSsmAq01m9rq31FkZ/6EM7CI3q+zpPIHgN3kG3OxJ82kPDjdIwP6278gW/RD2wLQ2tbS3HViFfMZILK0AFD2hgB/t9n2obOn8xtBq6C3+LqQxVq0Uy2U1o0mELmrXahXYbDh3vMOARKrIN654AhF5vUHR7i6rXOzLZb2gy7D+a9QZFu4uRXNhhOTijYNJCDs0fGzuN3vWKihtvFN695rw24l/EsUlgkeblwpVG4iW2xE8oRTx6nga8gOeo7yeceWrJSlqLzFWW+aY3pXYaQAFMWsih+WNjp9EH3UVVPn+j8O41d4jq8i/i2EyORZoPIK+mcZDoUV6Jn1CKePQ8DXgB86jvJ5yb57VkJa0npOcqczr5oaZ0e8vwd3sAUGDbV4kzs1Ks9RjmNwAAAAA=') format('woff2'),
url('iconfont.woff?t=1567585663653') format('woff'),
url('iconfont.ttf?t=1567585663653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567585663653#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfontShope {
font-family: "iconfontShope" !important;
font-size: 120rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shope:before {
content: "\e62d";
background: -webkit-linear-gradient(left bottom, #17cdb7 , #f9da85);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 工业用地 */
@font-face {font-family: "iconfontIndustry";
src: url('iconfont.eot?t=1567585713079'); /* IE9 */
src: url('iconfont.eot?t=1567585713079#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAACCgAAAJyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEHINsATYCJAMICwYABCAFhG0HRhsoBxHVkwVkXyTwnHR2B20SNT+HiplwGynB87mGvZ9kt1kooEJUnUogUO0RKyDVHAApUsBCsWSULE9vAgSQBUBxDPl92yJT0oSERV6HftZX/ho+DHZGHJNX4MN8XzhGpUVTNa15N0qggXbgaCQlPvPhjDeMXXkRlyFASKF60tUzNIXFYMwSQNatXrkYm9JjauIFi+CXbDTIMTys2q+eAEf998sfGrKg8DRG0tiK7mW0/TxvsmuXOGa1QzCeFWDbQAP1wIBMldpH0GGwniZUgoZSrCte4Of5JHH5q/3jgYD4GLExAPmQf04CW3iq1ygADJAGvAG+IYppT4szjA/TbtCX3/XEj98U+9l6q7sShgeuiWy/HkUHryLpb57ru3hbKBdeH3xZMJ94fX1jbsx51HPcb+RHWmZam91Kh3/63nznOTm6+P4POz0xbW99AwLt09dmFqY3/bfR1XZ9PH3mrj8lcQbtAPsmHAJ/VNCywqgiw6CMLCiNKt6Q9qbyQkIgAbuzfOvrzEVsFSwXQChSKIDGUk4wlHp4RDTCx9KKkDq92yOyrUcjJgBq7QYQMtyGIo170GR4SjCUr/DI8w8+GWmEzEj2gRGV2TG8HkpgST8UzTI7yyR5EP+CP0bFSZFP+4H36KG6qLKRHjN4jCX76RsRR46XiTpwHcZxoZWXBCNFEFnbsnRldyrMMmU5GUpgiX5INMvs3M6S517/gj9GxTVlFd4feI+jk1qhakHo5XOrsmu5ZT99Q8QRx8tEOmDFaAYXspaPSzBSCD38a6tEtVxbeTG/cnq6Q0CIoVFiLtVYzReiX2b/4HGpNv6RlqL6h5hlAAA=') format('woff2'),
url('iconfont.woff?t=1567585713079') format('woff'),
url('iconfont.ttf?t=1567585713079') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567585713079#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfontIndustry {
font-family: "iconfontIndustry" !important;
font-size: 120rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-industry:before {
content: "\e899";
background: -webkit-linear-gradient(left bottom, #516fd6 , #8194d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 土地 */
@font-face {font-family: "iconfontLand";
src: url('iconfont.eot?t=1567585744539'); /* IE9 */
src: url('iconfont.eot?t=1567585744539#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAABxAAAAMBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCHIIDATYCJAMICwYABCAFhG0HLhsnBsgekiRFUAR7ECkRrYISFg8P+/s692kELiJciQyhEi1uhuo2KeSdP2+dfRZyltCtSqZTpS9N11fz07pBgA04IIw040VnyIDL6U/x/+qAchlz2di08THAOKBAx5xkBRQYxw1jF7zA9QQq9Qqjs66grA4Yy9jdAnGU54TAuOCUdRSHcqFoGJu9ijG58uRW8hbwIPp8/BMT5STylF22aX++BGT9DHE66N0saV96z6Pl/GCTSDENyIhtjcEN9JL0ND2VelrfIHCs4uDn5P8C5WF/eARRsAurQTdUPpPKUz/qNxOQocAWwIVJd6Gorm10sowrt19su/Vrx53nO+++vbjtduLeu65r7hSs2dV8SVg4IH7t1dDZpZ0b7pTMrGqeOrRv9d62o3djZxe0Hmn/Z0G3bvXPzbecv3361u2de+9GLriTMGO/6lZds8+IzmW99f0Fmx2jl3ulMr0fn0/th5utBhYmLMu4+2X+plzXiqA+mOqb+OtFbafJ101iwVGwcPGU7+bsqJVx+NFIquWA++MEUet4sX/r882RjTtzC3ME0o+rHj8dWBqLIhr5+2X5+v93YNx1R8qrHavL9xRUlIMsQGkhkj9L7/3v7dRt/fMWq2Vfy6sy8OnZzMdIOyxM+V2Fgr9rzx93EH+1hsZOJRmQEuUTWxjetQzKeUSJHW30ZKq15VXyoVzLC4XL9GRIlRsmM3YauSpLUSi3EpWmFE6u0oTSE1kFJnUDhHpbkaj1Eql6l8mMfYxcq7co1EeKSjuiac4qo3HIdC1FQoYkUNQOeTFRYdfDTOPiGsRpFUKa10RcA6IaPgajI6LKuUKkQnSJAZoWLoYxDDElSlgANkMKBYFqSmRIzCKkjKlTIiNx04sixEQJTK1FIUIMIgGJtIN4YoQKDuozppX310A4WgpCtENQl26AUBp881C0CFEDyEKjapDgUS7RaMGJwTAYhFGEElQA/IjCSROQurmVDCLGRJBOSKqliES18FBjxPZm5d9tgEq2LQmnOpWd1Up4AAAAAAA=') format('woff2'),
url('iconfont.woff?t=1567585744539') format('woff'),
url('iconfont.ttf?t=1567585744539') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1567585744539#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfontLand {
font-family: "iconfontLand" !important;
font-size: 115rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-land:before {
content: "\e62a";
background: -webkit-linear-gradient(left bottom, #516fd6 , #07c9d2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
js代码：
// pages/caseQuery/caseQuery.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
var clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR;
console.log(calc)
that.setData({
winHeight: calc
});
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
})
