提示
字体图标：微信小程序和Android端不支持本地字体图标。

解决方案
替代方式1：不用图标改用图片，但失去了矢量和方便高亮变色的好处
替代方式2：字体文件放到服务器，从网络地址引用
替代方式3：将字体图标转换为base64格式字符串直接放到css里

特别注意
对于首页底部的原生tab，是在pages.json里配置，微信只支持图片不支持其他任何形式

其实, 如果只是H5端的话, 使用字体图标会跟普通的Web开发一样, 非常简单, 但是如果涉及到小程序端的话, 使用这种方式就会出问题, 总结一下

在H5端使用字体图标

使用Font Class

就很正常地使用, 首先下载阿里巴巴图标库到静态目录文件夹，在 main.js 中引入：

  1. import("@/static/iconfont/iconfont.css")

或在 App.vue 的 style 中引入：

  1. @import "./static/iconfont/iconfont.css";

在组件中使用：

  1. .main
  2.   .iconfont.icon-xxx

通过这种方式，图标为纯色，可以通过css修改图标的颜色和大小：

  1. .iconfont
  2.     font-size: 16rpx
  3.     color: #f00

当然，也可以在public/index.html中引入线上图标：

  1. <script src="https://at.alicdn.com/t/font_1830168_xxx.css"></script>

使用Symbol

在 main.js 中引入：

  1. import("@/static/iconfont/iconfont.js")

或在 App.vue 的 style 中引入

  1. import("./static/iconfont/iconfont.js")

在组件中使用：

  1. .main
  2.   svg.svg-icon: use(xlink:href="#icon-xxx")

通过这种方式，图标为纯色，可以直接设置图标大小。如果想要修改图标颜色，可以先到阿里巴巴图标库中去色：
📃 在uniapp中使用字体图标 - 图1

然后通过css修改图标的颜色和大小：

  1. .svg-icon
  2.   width: 1em;
  3.   height: 1em;
  4.   font-size 24rpx
  5.   color #f00
  6.   fill: #f00;

当然，也可以在public/index.html中引入线上图标：

  1. <script src="https://at.alicdn.com/t/font_1830168_xxx.js"></script>

封装组件使用

封装一个vue组件，使用的时候调用这个vue组件即可（参考了 uni-icons 的实现）

  1. <template>
  2.   <text :style="{ color: color, 'font-size': size + 'px' }" class="iconfont" @click="_onClick">{{icons[type]}}</text>
  3. </template>
  5. <script>
  6.   import icons from './icons.js';
  7.   export default {
  8.     name: 'UniIcons',
  9.     props: {
  10.       type: {
  11.         type: String,
  12.         default: ''
  13.       },
  14.       color: {
  15.         type: String,
  16.         default: '#333333'
  17.       },
  18.       size: {
  19.         type: [Number, String],
  20.         default: 16
  21.       }
  22.     },
  23.     data() {
  24.       return {
  25.         icons: icons
  26.       }
  27.     },
  28.     methods: {
  29.       _onClick() {
  30.         this.$emit('click')
  31.       }
  32.     }
  33.   }
  34. </script>
  36. <style lang="stylus" scoped>
  37. version = 0.8
  38. baseUrl = './'
  39. ttf = baseUrl + 'iconfont.ttf?v=' + version
  40. eot = baseUrl + 'iconfont.eot?v=' + version
  41. svg = baseUrl + 'iconfont.svg?v=' + version
  43. @font-face
  44.   font-family: "iconfont"
  45.   src: url(ttf) format('truetype'),
  46.     url(svg) format('svg'),
  47.     url(eot) format('embedded-opentype')
  49. .iconfont
  50.   font-family: "iconfont" !important
  51.   font-size 16px
  52.   font-style normal
  53.   text-decoration: none;
  54.   text-align: center;
  55.   -webkit-font-smoothing antialiased
  56.   -moz-osx-font-smoothing grayscale
  57. </style>

在同名目录下创建一个 icons.js, 其key-value是对应的字体图标的Unicode值：

  1. export default {
  2.   'icon-phone': '\ue68b',
  3. }

在vue中使用的时候：

  1. <template lang="pug">
  2. .main
  3.   .icon: iconFont(type="phone")
  4. </template>
  6. <script>
  7. import iconFont from '@/library/iconfont/index.vue'
  8. export default {
  9.   components: {
  10.     iconFont
  11.   },
  12. }
  13. </script>

使用 uni-icons 引入

当然，也可以直接通过 uni-icons 引入：

  1. <template lang="pug">
  2. .main
  3.   uniIcon.iconfont.icon-phone(size="30")
  4. </template>
  6. <script>
  7. import uniIcon from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
  8. export default {
  9.   components: {
  10.     uniIcon
  11.   },
  12. }
  13. </script>

使用网络字体

经测试，目前这种方式在小程序和Android端中才能够正常显示：

  1. version = 0.8
  2. baseUrl = 'https://at.alicdn.com/t/'
  3. ttf = baseUrl + 'iconfont.ttf?v=' + version
  4. eot = baseUrl + 'iconfont.eot?v=' + version
  5. svg = baseUrl + 'iconfont.svg?v=' + version
  7. @font-face
  8.   font-family: "iconfont"
  9.   src: url(ttf) format('truetype'),
  10.        url(svg) format('svg'),
  11.        url(eot) format('embedded-opentype')
  13. .iconfont
  14.   font-family: "iconfont" !important
  15.   font-size 16px
  16.   font-style normal
  17.   -webkit-font-smoothing antialiased
  18.   -moz-osx-font-smoothing grayscale
  20. .icon-phone:before
  21.   content: "\e60a"

这样可以通过 Unicode 或类名创建字体图标：

  1. .main
  2.   .iconfont &#xe60a
  3.   .iconfont.icon-phone

提示
在APP端，要使网络字体生效，必须加上 https://，如果只是网页的话，可以只写//。

使用base64

可以将woff2字体文件进行base64本地化（其实阿里巴巴图标库自带了base64版），这种方式小程序也是支持的，比如：

  1. <span class="iconfont icon-phone"></span>
  2. <span class="iconfont">&#xe748</span>
  1. @font-face {font-family: "iconfont";
  2.   src: url('data:application/x-font-woff2
  3. charset=utf-8;base64,d09GMgABAAAAAAbAAAsAAAAADOAAAAZyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEJgqLMIh+ATYCJAMsCxgABCAFhG0HfRvLCiOSUc4Dyf5ZYLdRj5CEpkmhUGAm8IR9nyVdPLW8tg+KwYd+cK/JedLoQTz5V9Xr7o/pntkZRwc4ArhQdFIKhnBGRc6FbKXo+OcYXboY/mhcATMWL2kK0XmBLCTsyg0FGGiKjfKQNYlDsC1gjXDFGXxfyWZe/2Ly8f73WART3aSSPMYnMIw+XxKxgfKdaIC1XR2jHBnWJOuC7dpDc+ITX98dHWVIPx3gU36Ddv1RufyLE3PinyYLGIqUKrBQAA') format('woff2');
  4. }
  5. .iconfont {
  6.   font-family: "iconfont" !important;
  7.   font-size: 16px;
  8.   font-style: normal;
  9.   -webkit-font-smoothing: antialiased;
  10.   -moz-osx-font-smoothing: grayscale;
  11. }
  13. .icon-phone:before {
  14.   content: "\e748";
  15. }

参考资料