因为glyphicons是字体图标，其颜色由伪元素.glyphicon:before的color控制，而非.glyphicon本身；若父元素未传递颜色或存在更高优先级样式（如!important），直接改.glyphicon的color将不生效。
为什么直接改 .glyphicon 的 color 不生效
因为 Glyphicons 本质是字体，图标显示依赖 :before 伪元素插入 Unicode 字符，而默认 CSS 中 .glyphicon 本身不设颜色，真正起作用的是 .glyphicon:before 的 content 和继承的 color。如果你只给 .glyphicon 设 color: red，但没确保该样式能穿透到伪元素（尤其在按钮等复合组件中），图标颜色就可能不变。
常见错误现象：给 <span class="glyphicon glyphicon-star"></span> 加了 style="color: #f00"，但图标仍是灰色；或在 <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button> 中无法单独染色图标。
- 必须显式设置
.glyphicon:before { color: ... }才可靠 - 若父元素（如
.btn）设置了color且未被覆盖，图标会继承它——这是“看似没生效”的主因 - 某些 Bootstrap 版本（如 3.3.7）的 CSS 中
.glyphicon:before带!important，需用更高优先级覆盖
覆盖图标的大小和垂直对齐
.glyphicon 默认 top: 1px、line-height: 1，目的是微调视觉基线。但和现代行高、弹性布局混用时容易错位——比如放在 h2 里偏高，或在 flex 容器中上下居中失败。
实操建议：
- 改尺寸：用
font-size直接缩放，例如.glyphicon-lg { font-size: 1.5em; }；避免改width/height，那对 inline 元素无效 - 调垂直位置：覆盖
top和transform: translateY()更稳妥，例如.glyphicon.align-middle:before { top: 0; transform: translateY(-2px); } - 慎用
vertical-align：它只对 inline 元素生效，且受父容器line-height影响大，调试成本高
替换图标内容或禁用特定图标
有时不需要改颜色或大小，而是想把 .glyphicon-user 换成自定义符号（如 “?”），或临时隐藏某个图标（比如灰掉已禁用功能）。
关键点：
- 覆盖
content必须带引号和反斜杠转义，例如.glyphicon-user:before { content: "\1F464"; }（Unicode 码点） - 禁用图标推荐用
visibility: hidden而非display: none，避免破坏原有布局占位 - 若想彻底移除图标但保留空格占位，可用
.glyphicon-hidden:before { content: ""; } - 注意：修改
content后，原字体文件仍会被加载，仅视觉变化
兼容性与性能陷阱
Bootstrap 3 的 Glyphicons 是多格式字体（.eot、.woff、.ttf、.svg），CSS 中 @font-face 声明顺序影响加载行为。你覆盖样式时，容易忽略底层字体加载失败带来的连锁问题。
容易踩的坑：
- 本地开发时路径错误导致字体 404，浏览器静默降级为系统字体，显示方块 □——此时你改再多 CSS 都没用
- 在 HTTPS 页面引用 HTTP 字体路径，触发混合内容阻断（尤其 IE/Edge）
- 用
font-family覆盖整个.glyphicon类，可能意外影响其他字体图标库（如同时引入了 FontAwesome） - 过度使用
!important覆盖，后续维护时难以追溯样式来源
最常被忽略的一点：图标是否渲染，最终取决于字体文件能否加载成功。样式覆盖只是最后一环，路径、CORS、MIME 类型配置出错，前面所有 CSS 都白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
