如何在Angular5日期选择器按钮中用CSS3注入Glyphicon图标

没问题，这种没法直接修改HTML结构的场景，用CSS伪元素绝对是最靠谱的解决方案！我帮你梳理两种可行的实现方式，你可以根据项目情况选：

方式一：复用Glyphicon字体图标 #

如果你的项目已经引入了Glyphicon的字体文件和基础CSS，直接用伪元素调用对应图标的Unicode编码就行：

步骤1：定位目标按钮 #

先通过浏览器开发者工具（F12）找到日期选择器左右箭头按钮的具体选择器，比如假设左箭头按钮的类是date-picker__prev-btn，右箭头是date-picker__next-btn（你需要替换成自己项目里的实际类名/选择器）。

步骤2：编写伪元素CSS #

/* 左箭头按钮 */
.date-picker__prev-btn:before {
  /* Glyphicon左箭头对应的Unicode编码 */
  content: "\e079";
  /* 指定Glyphicon字体族 */
  font-family: "Glyphicons Halflings";
  /* 匹配原Glyphicon的样式（可按需调整） */
  font-size: 14px;
  color: #333;
  vertical-align: middle;
}

/* 右箭头按钮 */
.date-picker__next-btn:before {
  /* Glyphicon右箭头对应的Unicode编码 */
  content: "\e080";
  font-family: "Glyphicons Halflings";
  font-size: 14px;
  color: #333;
  vertical-align: middle;
}

额外处理：隐藏按钮原文字 #

如果按钮本身自带文字（比如“上一页”“下一页”），可以用以下方式隐藏原内容，只保留图标：

.date-picker__prev-btn, .date-picker__next-btn {
  /* 把原文字移出可视区域 */
  text-indent: -9999px;
  /* 固定按钮宽度，避免塌陷 */
  width: 30px;
  position: relative;
}

.date-picker__prev-btn:before, .date-picker__next-btn:before {
  /* 把图标定位到按钮中心 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
}

方式二：纯CSS绘制箭头（不依赖字体） #

如果不想依赖Glyphicon字体，直接用CSS边框绘制箭头也能达到效果：

/* 左箭头 */
.date-picker__prev-btn:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #333;
  vertical-align: middle;
}

/* 右箭头 */
.date-picker__next-btn:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #333;
  vertical-align: middle;
}

注意事项 #

• 一定要确保选择器精准匹配到目标按钮，否则样式不会生效
• 如果用Glyphicon方式，要确认项目里已经正确引入了字体文件（通常是glyphicons-halflings-regular.woff2等文件）和对应的CSS声明
• 可以根据设计需求调整图标的大小、颜色、间距等样式

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