一、下载图标代码

1、将图标加入购物车

2、在购物车中将图标添加至项目

3、获取代码链接

4、复制代码

二、创建icon.css并把代码复制进去

将 " .iconfont " 改为 " .icon "

//	src/icon/icon.css

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1856340_sams1s83h8.eot?t=1591019406490'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1856340_sams1s83h8.eot?t=1591019406490#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPwAAsAAAAAB+QAAAOhAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDJIMAATYCJAMQCwoABCAFhG0HQRvrBsiuMTZGWg8Die65y3G2Zdf2vUBHinwT6kD+p818X5J9OmZdEFlr8+7syg4wVIBV4iotUHVOBQRFgzzwXO7fbtrSA+55lGC8tgccWIEGtsnGony78W/G/eZWHaE1kZ5/SYneuNeBaJFroK9R18EHGx83241wZKOZD3DP6aC7rrthXTKhQMN2G8LKxpa2FDxZMJriKwoW7dGQfOPgQQffNvmn20ZYfdLlQhD7n2OmS5AB5V/bXDLi+WhvNB63DiyiLwrkgO9ATtDvAdsAb79OAwGy1GmHOmXcNEiCOYkANBmBxZAZPdFQSiTir1gZg7ZIyHCwAvuD36efViABxhfBnDmpN3wZBj0rPvXnG/4ruh4CgumsAPh1AAe0AwigQaV9CR7F2+Gy1P5CD4AkMZiqq+2n/v+fhEeRS+tfHkAYDpTCLM4BAN0oweFThcMCgk9tWcDgU/8icAA+iFJichXgGoOteX8i8GbO0aBVV186cr5sybQjsetY2YyIM+MiWq6+tL3Hj+M88vVA98OypRZy09b7OFEq1dy8VPj7WuOuCRXp3autZUf60QvlAX20HT81bVcgLHF2dP1YYq2yIAe9c7KxoTZCmOaR8F0HFmf0JvJ2D3XIFv5a/LTXhNTjPr/RfcuSTOke7Tbs8iUuFsfTrWMJjglk1oZozx5i4lBtiOibdLuMfcfTjR25fYcH5RFGV5568yX17Oh7a1L7f+7ftnmVJ9NX0qVLXrFJ9Er2ADec9LIGtKlwWr73H2Ye8IKubvj9sQAA/xdf3jgCuHNNJj8e/8O/QefbL1qY3+8TCwB49psNff8hoLvgjxCogn9M0LFCaCLTIGJF7PB1h9A9NQkMkCUL8D+lgSKvplCWdi4GiFSaAJOhFjipGVJg24FPtm7gJw2ELG2NXJ+tmIujOAJoYysAKXAVmDzXgSuQRgrsS/Ap8xP8CgIOWWYExTtmaxGEeOjWi41eppasVKGldtyyTSYrLJ2iA4noYjctCvAztOuFQqqzC/nUSB3X7hRzvGSgizGWslw7pkbAeToatZXj2mG91HQIGuP06ehr1Rd1WGrHkGUol7aYoS2jLLGSErKULc7y6htZhZ+fQgtIiFrMbSirss+guTyh3pXOOujUATlSHu9Udisv8SQFdGEYFsXissUoI8CqRa24TXGqh4VpSxkdBAdEHX10pGpWV3mH5ZWxN9wAkMU8WQSGmCw5ZKy7nVipO4vla5n2p3QAAAAA') format('woff2'),
  url('//at.alicdn.com/t/font_1856340_sams1s83h8.woff?t=1591019406490') format('woff'),
  url('//at.alicdn.com/t/font_1856340_sams1s83h8.ttf?t=1591019406490') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1856340_sams1s83h8.svg?t=1591019406490#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 {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouye1:before {
  content: "\e618";
}

.icon-wode:before {
  content: "\e62b";
}

.icon-shouye:before {
  content: "\e63d";
}

三、在app.jsx中引入icon.css

import './icon/icon.css'

四、使用图标

1、安装taro-ui

# npm install -g @tarojs/cli

2、修改配置

备注为 < 添加配置 > 的地方为添加的代码

config/dev.js
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {},
  mini: {},
  //添加配置
  weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        // 小程序端样式引用本地资源内联配置
        url: {
          enable: true,
          config: {
            limit: 10240 // 文件大小限制
          }
        }
      }
    }
  },

  h5: {}
}

config/prod.js
module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {},
  mini: {},
    //添加配置
   // 小程序端专用配置
   weapp: {
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        },
        // 小程序端样式引用本地资源内联配置
        url: {
          enable: true,
          config: {
            limit: 10240 // 文件大小限制
          }
        }
      }
    }
  },

  h5: {}
}

3、代码

//关键代码
import { AtIcon } from 'taro-ui'

<AtIcon prefixClass='icon' value='shouye1' size='30' color='#F00'></AtIcon>

//完整代码
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'

import './toggle.css'

export default class Toggle extends Component {

    config = {
        navigationBarTitleText: 'IconFont'
    }
  
    render () {
      return (
        <View className='toggle'>
          <Text>阿里图标</Text>
          <AtIcon prefixClass='icon' value='shouye1' size='30' color='#F00'></AtIcon>
        </View>
      )
    }
}

五、效果展示