广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

近年来，随着前端技术的不断发展，字体图标作为一种轻量级的图标解决方案，被广泛应用于Web端和移动端的设计中。在使用uniapp开发移动端应用时，我们也可以方便地使用字体图标，但是经常会出现字体图标在打包后无法正常显示的问题。今天，我们将一起探讨uniapp打包后字体图标不显示的原因和解决方法。

首先，我们需要了解uniapp打包后会生成一个dist目录，该目录下的内容即为我们最终发布的应用，包括各种资源文件和HTML文件等。当我们使用字体图标时，其实是在HTML文件中使用了CSS样式，将数据源设为字体图标的字体文件，因此问题可能出现在HTML文件或者字体文件上。

最常见的情况是字体文件未加载成功，导致字体图标无法显示。可以通过F12开发者工具查看控制台输出，如果存在404或network error并且字体文件是请求失败状态，那么就可以判定字体文件未加载成功。

另一种可能是我们引入字体的地址错误，因为uniapp中使用相对路径来引入资源文件，所以需要保证HTML文件和字体文件在同一文件夹下。如果出现了文件路径错误，也会导致字体图标无法正常显示。同样，通过控制台输出可以判定是否存在路径错误。

如果字体文件未加载成功，我们可以尝试将字体文件添加到本地资源中，然后在HTML文件中使用本地相对路径来引用。

进入uni.scss文件，引入字体文件，如下所示：

@font-face{    font-family:'iconfont';    src:url(../fonts/iconfont.ttf) format('truetype');}

这里需要注意，@font-face 中 font-family 的名称需要和HTML中使用的字体名称保持一致。

在HTML文件中使用字体图标，如下所示：

<i class="uni-icon uni-icon-wode"></i>

这里的uni-icon-wode是我们在字体文件中自定义的图标类名，而uni-icon是uni.scss中定义的基础类。

若通过此方法解决了字体图标无法显示的问题，那么恭喜你，问题已经得到了解决。但是，有时即使我们已经按照上述方法来处理，字体图标依然无法正常显示，这时就可以尝试下面的方法。

有时我们会发现字体文件本地引用失败，那么我们可以考虑使用cdn来解决该问题。但是在使用cdn时，需要保证我们引入的cdn地址正确，并且由于cdn地址可能受到网络影响，所以最好提供多个备选方案。修改方式如下：

在manifest.json 文件中，添加字体文件的资源地址，如下所示：

"networkTimeout": {   "request": 5000,   "downloadFile": 10000},   "onDemandResourceRules": [   {      "host": "xxxxx.com",      "files": [         "/fonts/iconfont.ttf"      ]   }],"preloadRule": {   "async": [      {"path": "xxxxx.com/fonts/iconfont.ttf"}   ],   "sync": [   ]}

其中xxxxx.com为我们指定cdn的域名。

在uni.scss 文件中使用cdn地址，如下所示：

@font-face{    font-family:'iconfont';    src:url(//xxxxx.com/fonts/iconfont.ttf) format('truetype');}

这里的// 表示使用了协议相同的相对路径，适用于http、https等。

在HTML文件中使用字体图标，如下所示：

<i class="uni-icon uni-icon-wode"></i>

同样，这里的uni-icon-wode是我们在字体文件中自定义的图标类名。

需要注意的是，使用cdn也可能会遇到其他问题，比如连接不稳定、文件超过缓存限制等，所以需要多做测试和备份方案。

总的来说，在使用uniapp开发移动应用时，字体图标是一个很好的和轻量级的图标解决方案，但是由于打包后的复杂性和资源处理方式等问题，可能会出现字体图标无法正常显示的情况。以上两种方法可以帮助我们解决这些问题，让我们的应用更加美观实用。

以上就是uniapp打包后字体图标不显示怎么办的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~