如何调整Paper Kit模板导航栏及移动端侧边栏Font Awesome图标大小？

问题根源 #

Paper Kit模板自带的CSS样式优先级高于基础设置，导致直接修改font-size、使用fa-2x类甚至加!important都无法生效。

具体解决代码 #

在自定义CSS文件（或页面<style>标签）中添加以下代码：

1. 统一调整所有设备的图标大小

/* 精准定位导航栏内的社交图标，确保样式优先级足够 */
#demo-navbar .navbar-nav .btn.btn-simple i.fa {
    font-size: 24px; /* 按需修改尺寸，比如24px/28px */
}

2. 单独优化移动端侧边栏图标

如果需要在小屏幕（侧边栏展开状态）让图标更大，添加媒体查询适配：

/* 适配Bootstrap移动端断点（宽度≤767px） */
@media (max-width: 767px) {
    #demo-navbar .navbar-collapse .navbar-nav .btn.btn-simple i.fa {
        font-size: 30px; /* 移动端专属更大尺寸 */
    }
}

关键说明 #

• 选择器必须精准：通过#demo-navbar（导航栏ID）+ 层级类，确保样式优先级超过模板自带规则
• 不要直接修改模板原CSS文件：新建自定义CSS并放在模板CSS之后引入，避免后续模板更新丢失修改
• 用浏览器开发者工具（F12）排查：选中图标元素，查看「计算样式」面板，确认哪个规则在控制字体大小，针对性调整选择器

内容的提问来源于stack exchange，提问作者Mer