How to center an icon inside css shapes?

Question

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.

score 2 · Accepted Answer · answered Oct 14 '16 at 13:53

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

score 1 · Answer 2 · answered Oct 14 '16 at 13:48

The problem lies in that the Glyphicon Shape doesnt not fit the full width of its container box. Its actually got 3px more on the right hand side putting it out of alignment.

I have changed your code a bit to make it easier to work with and have less transforms and translates as they can get confusing in the long run and also impact position in weird ways.

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

How to center an icon inside css shapes?

2 Answers2