小程序引入自定義字體圖標

1.先到:https://www.iconfont.cn定義好自己需要的字體圖標,並添加至項目。
2.將該項目的.zip文件下載,解壓後找到iconfont.ttf文件,將該文件添加至https://transfonter.org/,打開:Base64 encode後轉換。
3.將轉換後的.zip文件下載,解壓後找到stylesheet.css文件,複製該文件全部內容粘貼到.css文件中,內容如下代碼段:

@font-face {
    font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO4AA0AAAAACAQAAANiAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCUhEICoNEgwELDgABNgIkAxQEIAWFCAdJG8kGyB6HsdtkiEoVjc07jOCpTvp63ZPsBEvzSz7RPsK8xe8ba39OzCCLRtemNruIerpEVn0dmicaNOgk+iHiotLfX033JHy2tmoLdl54Aa1+2+OO4jCgKI7C247bCrzJmsQCyjzkBvQ2EZ9U3gsB79w0XAcf/tT9Gu7WgSa6gSRkFaFAQhTiPBXS6ektnAu8P34yKUqSSsbN3LBnUTdyv/Xd8/nk1sm2ZzDfQwAyMvogsIZSoA+VCaBUSnzr2+Z3z7daZrVX7vl/jyUIxIgqgUskJD9PAJ44Wi0JVEETJU7FM4ACAKGQc48ePZtterbfai8e3OtV+8x782998uXHR7q73/nko48PfXpnzua3bXvGTV0urhtZs9X1DaP2b6nfNMJ12xm9PHcMa3r33S3ffnvzk99ZCyVuP/PO7t/vbXUmom8eyFv+O+9sAe533J7dcbLBR3cZO9LKbfX6GXf0Utap6RHbNJSn3NlonHm7BMS77px38LTwQH6c3+P3M56h2GtLa9RLnQZ16vT279exZcgZuxc7Yram61EDFfmUM08+M6dOp3bRHhyPxv/+lO17VpM84/S9kkx7p8deCzP6OmyOPX03zm7XsXfHtvny99+8IecJO5fLp/65cQ3xnlSJenswxOPkHncQyBz49v0zv2a+9fOajs9rpjwsOfy/4+rfH1d0/Oi4pdzrFoDILcPvep3VD+SPz3398rG/m30OBIJ/Hsi/U/vMf8pGYbht1qf1XP4sLwClBIIhUikA+TP8nwMUBaBAwSIVQghVW1CBhLo6WgA6+RGArhIQCKXNEUjaOACBrHSqAIXSDQJUNLwoQFXpCwHqRsciBBo6xyWyKGoYBTaEDvIhaWcHyDqYxAs6ChXdXENVB59Qt6W/YxqGxYEMFhvDOkxg3WJ1mlXZvboMGyLGTDBQfwIgzMTCn+L7I5WD8PXAJkyaNKDDGPznrdfkvVPsLbEx43qLsVIlSYET4vCp4yZkxZePHsLG+nnNuClSmgkThFjCmGGDYhUXEbMBA3YUayT8lT6sy4QkeLyAjh8p0yYOF2dK4U1aYWun/HM4AvYuf7IR6ZIlEyVHSbrqtLHlt/fMLKyZ6nQ8iDqGV2eHFClyFM3D9u4Ykn29SmJieFLTs8vwLI7M7T05y6kAAA==) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAWwAA0AAAAACAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFlAAAABoAAAAci3pWRUdERUYAAAV0AAAAHgAAAB4AKQAMT1MvMgAAAaAAAABDAAAAVjxuSbNjbWFwAAAB+AAAAEcAAAFS5ibRlWdhc3AAAAVsAAAACAAAAAj//wADZ2x5ZgAAAlAAAAGWAAABxJPCbL5oZWFkAAABMAAAADAAAAA2GPBzOWhoZWEAAAFgAAAAHQAAACQHvQOFaG10eAAAAeQAAAATAAAAFAxLAF5sb2NhAAACQAAAAA4AAAAOAPAAlm1heHAAAAGAAAAAHwAAACABFABhbmFtZQAAA+gAAAFJAAACiCnmEVVwb3N0AAAFNAAAADYAAABJup9BrHjaY2BkYGAAYtZNwn/j+W2+MnCzMIDArdfi8+C0zP8DzPeZHYBcDgYmkCgAOAYLdnjaY2BkYGBu+N/AEMPCAALM9xkYGVABCwBXgwNLAAAAeNpjYGRgYGBjCGVgYQABJiDmAkIGhv9gPgMAEZUBdgB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ4fZG7438AQw9zA0AAUZgTJAQDpJAydAHjaY2GAABYIdmLwZpABAAL7ALYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMzxie8Tw/+P8/giXFLPlDwgWqCwwY2RjgXEagHpA+FMDIMOwBAA4ZDWsAAAAAAAAAAAAADgCWAOIAAHjaPYwxaFNRFIbPf2/eSwJtzLkvyS1oU0zb9xpLX9o8SVBLSIOgYKPQukuX5oGznWuHUpLSsdBOLQUnncQ1REEh0EkKxUmdxaF0lVtfovQM3//z/+ccAjXoWHbFCxJE1SQa6KJ7jK5pEMXoyVVPfpR10lSix/ScyCqU4FaqNeQxgWpN5HQeN2DLgh1PDZKK6/mYtKNosOg5PrwU4pmcHrI8uKyWI8SjIrJ5RIX4NZbuTEmX7yzMKSmUPz/Lrphq84atEg546zVDJVV8jEe4lB5RuiU6YdgRi+XtN0LdVIh9O5Gxtc3L5roQ680h67xfDL00I+tI6WTBaS8s7jMW7YQKMru7mcBJWFCjzKMKeBa2pWyHSy9v++d7KaVSh6cxJHdWRKv5/2eLopF06+pUfpc1smmCfKKk8BDAmg4sztizKLgeT167e3ACvlt5gHIuywFPW/KTeWqK4/jN+PznA14xljX3OYejfzLT13zEum++mrc4w33zZRxN8/7hxYV5xFoz6qY31HdmFfWBMz0c/Pj5F0EoXjoAAHjafZA9TgMxEIWf8wckEkIgqF1RANr8lCkTKfQIpaNINt6QaNdeeZ1IOQEtFQeg5RgcgBsg0XIKXpZJkyJr7ejzm5nnsQGc4xsK/98l7oQVjvEoXMERMuEq9RfhGvlduI4WPoUb1H+Em7hVA+EWLtQbHVTthLub0m3LCmcYCFdwiifhKvWVcI38KlzHFT6EG9S/hJsY41e4hWtlqQzhYTBBYJxBY4oN4wIxHCySMgbWoTn0ZhLMTE83ehE7mzgbKO9XYpcDHmg554Ap7T23Zr5KJ/5gy4HUmG4eBUu2KY0uInQoG18snNXdqHOw/Z7ttrTYv2uBNcfsUQ1s1Pw92zPSSGwMr5CSNfIyt6QSU49oa6zxu2cp1vNeCIlOvMv0iMeaNHU6925p4sDi5/KMHH20uZI996gcPmNZCHm/3U7EIIpdhj+T2HEZAAAAeNpjYGKAAC4wyciADtjAokyMTIzMjCw8xRmJeelZmYl5JfmlbBmJ+ZVAqiqjtDLVEACTEgpBAAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAFAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0rdfi82A0AEIFBp4AAA==) format('woff');
    font-weight: normal;
    font-style: normal;
}

4.找到第2步的解壓後的文件夾,將裏面的iconfont.css文件,不要該文件@font-face的源,將所有的類和名樣式複製如下代碼段,放在步驟3粘貼的.css內容一塊

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconzhuye1:before {
  content: "\e7c1";
}

.iconshangjiantou:before {
  content: "\e600";
}

.iconhaoyou:before {
  content: "\e60c";
}

5.全局引用該.css文件,在頁面引用字體圖標時寫好對應的類名。
6.當iconfont項目添加新圖標時,重新開始第2步操作。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章