如何将 css 形状内的图标居中？

Question

我使用 CSS 边框创建了一个三角形，我想将其固定在视口的底部，而且我还有一个 Bootstrap Glyphicon，我希望它位于 CSS 三角形，但我不知道该怎么做。

这是我的代码：

.to-top {
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid black;
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}
.to-top span {
  font-size: 2em;
  transform: translateX(-50%);
}

<a href="#" class="to-top">
  <span class="glyphicon glyphicon-chevron-up"></span>
</a>

你能帮我解决这个问题吗？

Answer 1

问题在于 Glyphicon Shape 不适合其容器框的整个宽度。它实际上在右侧多了 3px，使其不对齐。

我对您的代码进行了一些更改，使其更易于使用并减少 transforms 和 translates，因为它们在较长的运行中可能会造成混淆并影响位置以奇怪的方式。

.to-top {
  position: fixed;
  width: 120px;
  height: 120px;
  bottom: -60px;
  background: black;
  left: calc(50% - 60px);
  transform: rotate(45deg);
}
.to-top span {
  font-size: 2em;
  transform: rotate(-45deg);
  left:3px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="to-top">
  <span class="glyphicon glyphicon-chevron-up"></span>
</a>

Answer 2

.to-top {
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid black;
  position: fixed;
  bottom: 0;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.to-top span {
  height: 2em;
  font-size: 2em;
  transform: translateX(-50%);
  position: fixed;
}

.to-top span::before {
  position: absolute;
  bottom: .25em;
  left: -.5em
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<body>
<a href="#" class="to-top">
   <span class="glyphicon glyphicon-chevron-up"></span>
</a>

如何将 css 形状内的图标居中？

How to center an icon inside css shapes?

html

css

centering

css-shapes