【转载】给你的typecho的Joe主题博客主题添加底部导航栏

✨ 本站同款勉强能用的版本哦 ✨

我们需要引入一个外部 CSS 文件来定义底部导航栏的样式。这里采用 CDN 链接，既保证样式快速加载，又能自动同步更新~

🎨 第一步 - 引入 CSS 部分

<link href="https://cdn.heylie.cn/css/dwo_cc.css" rel="stylesheet">

通过外部 CSS 文件定义底部导航栏样式，CDN 链接让加载更高效、样式更新更及时 。
可以使用主题自带的全局插入css哦：

💻 第二步 - 写入前端

📁 还是使用主题自带的插入全局自定义底部功能

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://fghdz.top/"> <span class="iconfont icon-island__easyi"></span> 首页 </a></li>
        <li> <a href="https://fghdz.top/%E5%8F%8B%E9%93%BE.html"> <span class="iconfont icon-Cheating"></span> 友链 </a></li>
        <li> <a href="https://fghdz.top/824.html"> <span class="iconfont icon-dongzuo"></span> 游戏 </a></li>
        <li> <a href="https://fghdz.top/753.html"> <span class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zutaigongju-da"></span> 小工具 </a></li>
        <li> <a href="https://fghdz.top/750.html"> <span class="iconfont icon-00limao"></span> AI </a></li>
             </ul>
</div>   

⚠️ 图标使用说明：

• 参考一：本站顶部图标样式可参考 → 「主题美化指南：自定义顶部图标设计与实现」
• 参考二：前往 iconfont 挑选心仪图标后引用（不会操作可百度，或点击底部评论，一般看见的都会回复）

<link rel="stylesheet" href="//at.alicdn.com/t/c/xxxx.css">
引入自己的css，不要直接复制粘贴的喵~

然后，把地址复制替换在span里面就像了

图标CSS链接生成和挑选

📌 总结：

✅ 将上述代码添加到博客主题的底部文件位置
✅ 代码定义了包含五个链接的底部导航栏
✅ 每个链接搭配图标+文本标签，视觉更清晰

原文地址：https://blog.heylie.cn/archives/432/