Google Material Icons外部CSS设置font-size无效，内联CSS却生效？
2026-5-8
解决Google Material Icons外部CSS修改font-size无效的问题
看起来你遇到的是CSS优先级或加载顺序导致的样式覆盖问题——Google Material Icons的默认样式里已经给.material-icons设置了font-size:24px，如果你的外部CSS加载时机早于官方样式，或者选择器优先级不够，就会被默认样式覆盖。下面给你几个可行的解决方案：
1. 调整CSS加载顺序
把你的外部CSS文件链接放在Material Icons的字体样式链接之后，这样你的自定义样式会在官方默认样式之后加载，自然会覆盖默认值：
<!DOCTYPE html> <html lang="en"> <head> <!-- 先加载Material Icons官方样式 --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- 再加载你的自定义CSS --> <link rel="stylesheet" href="sheet.css"> <title>Document</title> </head> <body> <i class="material-icons">amp_stories</i> </body> </html>
你的外部CSS保持不变即可：
.material-icons{ font-size: 40px; }
2. 提高选择器优先级
如果调整加载顺序不方便，可以使用更具体的选择器来提升优先级，比如结合图标所在的父元素选择器：
/* 优先级高于单独的.material-icons选择器 */ body .material-icons{ font-size: 40px; } /* 若图标有专属父容器，还可以这样写 */ .icon-container .material-icons{ font-size: 40px; }
3. 使用!important（应急方案）
虽然不推荐过度依赖!important，但如果以上方法都无法生效，可以临时用它强制覆盖默认样式：
.material-icons{ font-size: 40px !important; }
补充：为什么内联CSS能生效？
内联样式的优先级本来就高于外部和内部CSS，所以它能直接覆盖官方的24px样式，但内联样式不利于统一维护，还是推荐前面两种更规范的方法。
内容的提问来源于stack exchange，提问作者Jshnn N
相关产品推荐
相关产品推荐
