前言
此前有发过一个《WordPress美化-底部彩色菜单和运行时间》教程，本次将展示另一种底部彩色菜单样式。
效果图
效果可查看本站底部
前置条件
调用Font Awesome 4图标库–参考上期内容。
详细教程
添加CSS代码
将以下CSS代码添加到您的主题的自定义CSS区域中。如果使用的主题有子主题的话也可以新建一个CSS文件。
Core Next用户添加路径：主题设置–>插入代码–>自定义CSS
以上为彩色菜单CSS部分，如需图标旋转，添加以下CSS内容：
添加HTML结构
将以下HTML代码添加到博客的 外观–>小工具–>底部小工具（左侧）–>自定义HTML（未包含站点运行时间部分，请参考上期内容）
<div class=”github-badge” style=”text-align: center;”>
<span class=”badge-subject bg-red” style=”border-radius: 5px;”><span class=”badge-title”><i class=”fas fa-thumbs-up” style=”animation: rotateIcon 2s linear infinite;”></i></span>
<a style=”color:#fff; border-radius: 5px;” href=”https://www.x8xx.cn/reward.html” target=”_blank” rel=”noopener”>打赏捐赠</a>
</span>
<span class=”badge-subject bg-brightgreen” style=”border-radius: 5px;”>
<span class=”badge-title”><i class=”fa fa-link” style=”animation: rotateIcon 2s linear infinite;”></i></span><a style=”color:#fff; border-radius: 5px;” href=”https://www.x8xx.cn/applink.html” target=”_blank” rel=”noopener”>友情链接</a>
</span>
<span class=”badge-subject bg-orange” style=”border-radius: 5px;”>
<span class=”badge-title”><i class=”fa fa-sitemap” style=”animation: rotateIcon 2s linear infinite;”></i></span><a style=”color:#fff; border-radius: 5px;” href=”https://www.x8xx.cn/sitemap.html” target=”_blank” rel=”noopener”>站点地图</a>
</span>
<span class=”badge-subject bg-blueviolet” style=”border-radius: 5px;”>
<span class=”badge-title”><i class=”fas fa-bullhorn” style=”animation: rotateIcon 2s linear infinite;”></i></span><a style=”color:#fff; border-radius: 5px;” href=”https://www.x8xx.cn/about.html” target=”_blank” rel=”noopener”>关于我</a>
</span>
<span class=”badge-subject bg-blue” style=”border-radius: 5px;”>
<span class=”badge-title”><i class=”fa fa-envelope” style=”animation: rotateIcon 2s linear infinite;”></i></span><a style=”color:#fff; border-radius: 5px;” href=”https://www.x8xx.cn/comment.html” target=”_blank” rel=”noopener”>留言</a>
</span>
</div>
结语
通过这些步骤，你的网站将显示带有Font Awesome图标的底部徽章，并显示网站的运行时间。如有疑问可联系本站。
