How to center an icon inside css shapes?

I created a triangle shape using CSS borders which I want to stay fixed at the bottom of viewport, and also I have a Bootstrap Glyphicon which I want to be centered inside that CSS triangle shape but I can't figure out how to do it.

Here's my code:

.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>

Would you please help me on this.

Solution

.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>