微信小程序中的字体图标使用渐变色

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

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 () {

  },

})

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,921评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,635评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,393评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,836评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,833评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,685评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,043评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,694评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,671评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,670评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,779评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,424评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,027评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,984评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,214评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,108评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,517评论 2赞 343

微信小程序中的字体图标使用渐变色

推荐阅读更多精彩内容