uniapp打包后字体图标不显示如何办

问题背景

uniapp 是一种跨平台的开发框架，它使用 Vue.js 来进行应用程序的开发。在开发过程中，有时候会遇到打包后字体图标不显示的问题。这种情况通常是由于打包时没有正确设置字体文件路径或者字体文件无法正确加载导致的。

问题原因

uniapp 使用字体图标时，通常会将字体文件放在项目的 static 目录下，并在 CSS 样式中使用 @font-face 来引入字体文件。而在打包后，字体文件的路径可能会发生变化，需要正确设置引入路径才能保证字体图标能够正常显示。

解决方案

为了解决 uniapp 打包后字体图标不显示的问题，您可以按照以下步骤进行操作：

1. 检查字体文件路径：在项目的 static 目录下确认字体文件是否存在，并记住字体文件的相对路径。
2. 修改 CSS 样式：找到在项目中使用字体图标的 CSS 样式文件，并在其中使用正确的相对路径来引入字体文件。例如：

    @font-face {
      font-family: 'iconfont';
      src: url('../static/fonts/iconfont.eot');
      /* 更多字体格式和路径 */
    }
  

3. 重新打包应用程序：在修改完 CSS 样式后，重新打包应用程序，确保新的字体文件路径被正确引用。

总结

uniapp 打包后字体图标不显示的问题通常是由于字体文件路径设置不正确导致的。通过检查字体文件路径并修改 CSS 样式中的引用路径，您可以解决这个问题并确保字体图标能够正常显示。