如何让glyphicon-plus图标更纤细且hover时保持颜色不变？

安全阿岳

2026-5-29

解决方案：调整Glyphicon Plus图标粗细并阻止Hover变色

针对你的两个需求，这里有直接可行的CSS调整方案，结合你现有的代码来修改：

1. 让图标更纤细

Glyphicon是基于字体的图标，我们可以通过两种方式调整它的粗细：

方法一：调整字体重量（简单直接）

如果你的Glyphicon字体支持不同字重，直接给图标设置更轻的字体重量：

.btnadd .glyphicon-plus {
  font-weight: 300; /* 数值越小越细，可选100-900，根据实际效果调整 */
}

方法二：CSS横向缩放（更灵活）

如果字体重量调整效果不明显，用transform: scaleX()来横向压缩图标，这个方法几乎适用于所有情况：

.btnadd .glyphicon-plus {
  transform: scaleX(0.8); /* 0.8表示缩小到原宽度的80%，数值按需调整 */
  transform-origin: center; /* 确保缩放时图标居中 */
}

2. 阻止Hover时图标变色

默认情况下，Bootstrap的按钮或图标组件可能会在hover时继承或触发颜色变化，我们需要强制覆盖这个行为：

/* 确保图标默认和hover时都是白色 */
.btnadd .glyphicon-plus,
.btnadd:hover .glyphicon-plus {
  color: white !important; /* 用!important确保覆盖默认样式，或者提高选择器优先级 */
}

完整的CSS代码整合

把以上调整加到你现有的.btnadd样式后面即可：

.btnadd { 
  border: none; 
  color: white; 
  height: 50px; 
  width: 50px; 
  border-radius: 50%; 
  position: fixed; 
  bottom: 5%; 
  right: 1%; 
  background: #60BBEA !important; 
  padding: 12px; 
  font-size: 20px; 
}

/* 调整图标粗细 + 固定颜色 */
.btnadd .glyphicon-plus {
  /* 选其中一种粗细调整方式 */
  font-weight: 300; 
  /* 或者 transform: scaleX(0.8); transform-origin: center; */
}

.btnadd .glyphicon-plus,
.btnadd:hover .glyphicon-plus {
  color: white !important;
}