小程序店铺装修之字体图标

448 阅读1分钟

接上一篇文章,这里面主要是写关于字体图标的使用。

首先,字体图标是从阿里巴巴矢量库里面下载的,首页-》资源管理-》新建一个自己的项目,然后去挑选项目中需要使用的字体图标,选择unicode方式复制代码,在小程序里面需要改动下。重点看以下代码的content部分。

@font-face {
  font-family: 'iconfont';  /* Project id 2691106 */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQgAAsAAAAACRQAAAPUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqFKIULATYCJAMUCwwABCAFhGcHRBspCMgusG3Yk1hw587CN3BbkrVPbFgRFzx9a+Wvqu7ZOQIKIj2/IA9ByAA7FmqFCVnW0TO11ha16ovdpdeIenpV9u7vT2d/H5fXkJjO0KnQVBsRElmUMeAacJr1HND8b4CAAbNLa2oLKOtelqL6ztWZB76/IitAhTBX4SZ0XecByG1qSgIKI2cBO7tPmxP4HATIpF+HzC3bxkyg9M5FIoFK2UibBdxOuXOT9YN8MYxLsQmhL8h7qVOZwIMOahqMm28v/yxKCIo3pCcdeP84OPxZ8cskoyXO7LtkfTM4XAEPGNDds6g8Sk/fkWXXumWRGVfJZgPw/VmIoj/7c9tL+tXDiGPDmXINDP3885AACWXDuEFxM8epJAx+biOh8HOchMAv4/cO8oQza2p8ATkDY7UazHhAKqRTsrNLylxFfvX14uTRhweFiFufnohly+MjETPd34fZeCRa8qAY0HIG1Zq2QZk7uGJzqfmsnOHZ5EymZA/NJGc9LfOpubvx4+lstWwpWg7eP0raJ8YnNrIiXEbuxY5wDcmeqjV5QRBPyR2ak/uWM/ws9TQz2zT70GM02558kpWjpw8/ixY/WNrV7IgNnWp20ZcKZWw9Fms5RbsuY05530JOyta8tdVygnKeEkWUs/pEs5M6ZcvjZTfO0RRIJpGgPddKgXImR+HdQ18PfcaylwRLXLPuWd4cW8hdiJ1OsD8udIba2m50Cj+dt9s4h/KWf253cm2gQD3Ld9pCXBt2nVc5Mp6tGcbOnbq3MqXfZvjR3upTgOlsu52KJVpOUe5LhR6PPDKG7UajVrCEaLFzux3U2CI9ZI22W9U/PKSLlP4tX16Sbk+XGC/jBgBES04sGX28ZJEViF5klVfWYXx+dP982Zr/YdHOLP6offFmMvnpcjTYK0Plw15HSVyYovlf9KUJu13OpAruAQjguSKXsgpXy8yFky/0XA8uyl0BIfRxAigxqsAIadQ6Yyd4slgEASFrIZMu/VdnUUSRhbgMoNUqA0K+XVByeQdGviOtMz6Bp9QrBOT7hUyOlXO7LFpzeTNGfoLGYWAackFZYhQfMdc1IDYq+HFU2YJwhEMR6nr7g81BJCFcxRmRCVZPCAMZLItwgH8aEgQZKlgOoyBRhwhRWjR91+JeRR2URdALQ/wIZBwUMA3iBMkkjL6c+D+eAcKKEvjhnFpLEouwDK0P6ahpc2gHkZRrYU/2jpjA0iMIhj2KgclE0MA3iQhyTQYp8QeFIUGEWqhERdFCQ8uYvEjdPhY3MHfzbijdw4uKiRMvAe7WTb+UoyEdb9VnhQAA') format('woff2'),
       url('//at.alicdn.com/t/font_2691106_bbns11m9uc6.woff?t=1626930541055') format('woff'),
       url('//at.alicdn.com/t/font_2691106_bbns11m9uc6.ttf?t=1626930541055') format('truetype');
}


 .iconfont {
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-jia:before {
    content: '\e703';
  } 
  
  
   <text class="iconfont icon-jia" >首页</text>