Frozen UI使用笔记 - 自带图标导致底部导航部分文字无法显示的解决

最新推荐文章于 2022-05-14 17:40:00 发布

原创最新推荐文章于 2022-05-14 17:40:00 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在使用FrozenUI框架时遇到的底部导航文本显示不全的问题，并通过替换为FontAwesome图标成功解决了该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作底部导航时，用Frozen UI自带的图标会导致部分文本无法显示，如下：

<footer class="ui-footer ui-footer-stable ui-border-t" style="background: ">
    <ul class="ui-tiled">
        <li><i class="ui-icon-personal"></i><h6>Frozen UI</h6></li>
        <li><i class="ui-icon-personal"></i><h6>Frozen UI</h6></li>
        <li><i class="ui-icon-personal"></i><h6>Frozen UI</h6></li>
    </ul>
</footer>

换成Font Awesome图标后问题解决，效果如下：

<footer class="ui-footer ui-footer-stable ui-border-t" style="background: ">
    <ul class="ui-tiled">
        <li><i class="fa fa-user-circle-o" aria-hidden="true"></i><h6>FontAwesome</h6></li>
        <li><i class="fa fa-user-circle-o" aria-hidden="true"></i><h6>FontAwesome</h6></li>
        <li><i class="fa fa-user-circle-o" aria-hidden="true"></i><h6>FontAwesome</h6></li>
    </ul>
</footer>