CSS Bootstrap 字形对齐问题

Question

我一直在尝试创建一个网站，如附图中所描绘的那样，彩色三角形是按钮，其余只是虚拟图标。

为此，我一直在使用 Bootstrap 的字形（v3 - 表示为图标字体）。问题是当我使用 transform: rotate() 函数时图标没有对齐。

.trianglewrapper {
  text-align: center;
  letter-spacing: -100px !important;
}
.triangle {
  display: inline-block;
}
.down {
  transform: rotate(90deg);
}
.up {
  transform: rotate(-90deg);
}
.down,
.up {
  -webkit-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
@media only screen and (max-width: 2000px) {
  .triangle {
    font-size: 400px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="trianglewrapper">
  <div class="triangle down">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle down blue">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up red">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle down">
    <span class="glyphicon glyphicon-play"></span>
  </div>
  <div class="triangle up">
    <span class="glyphicon glyphicon-play"></span>
  </div>
</div>

到目前为止，我已经尝试使用 transform-origin（如其他 Whosebug 问题所建议和解决的那样）以及许多其他涉及更改 HTML 结构的方法，但没有成功。我要么不旋转三角形，要么旋转三角形但松散对齐（一些更高一些更低）或如包含的代码中那样 - 旋转三角形但是在单个垂直列中。

我想知道如何对齐图标，使它们具有相同的顶部和底部。我也接受一个全新方法的建议。提前谢谢大家。

Answer 1

删除 transform-origin 并移动 up 个三角形。

.up {
  position: relative;
  left: 70px;
  top: 125px;
}

CSS Bootstrap 字形对齐问题

CSS Bootstrap Glyphicon alignment issue

html

css

twitter-bootstrap

glyphicons

CODEPEN