title: Twitter Bootstrap carousel - can't change side arrows
body: <p>I have a Twitter bootstrap carousel working pretty well on my web page, but I can't get the side arrows to behave the way I want. My CSS knowledge is maybe a 5 out of 10.</p>
  
  <p>Currently the "glyph" arrows are absolute positioned from the left and right edges of the window. As I shrink or grow the window, those arrows stay exactly the same distance from the window edges. Which is weird and wrong because they move all over the place on top of the carousel images. I want them to stay in fixed position on the carousel image, not on the browser window. Also I need to change the font glyphs to transparent images.</p>
  
  <p>The arrows on the left and right scroll the carousel when clicked. They are not images, they're glyphs, which I guess is some kind of weird font. Here's the HTML:</p>
  
  <pre><code>&lt;a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"&gt;&lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"&gt;&lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Here is the css for the href:</p>
  
  <pre><code>.carousel-control {
  background: #343432;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  </code></pre>
  
  <p>And here is the css for the inner span:</p>
  
  <pre><code>.glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  }
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>.glyphicon {
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  }
  </code></pre>
  
  <p>Though it doesn't show in the raw html, when looking through Chrome dev toolbar inspector, inside the span I see this:</p>
  
  <pre><code>::before
  </code></pre>
  
  <p>So I need to know how to change the arrow positions to stay fixed relative to the carousel images, not the browser window. And I need to change the glyphs to some transparent arrows that I have. </p>
  
  <p>Here is the actual web page in case you want to inspect any elements:
  <a href="http://www.zerogravpro.com/temp/bootstrap/" rel="noreferrer">http://www.zerogravpro.com/temp/bootstrap/</a></p>
  
  <p>Thanks.</p>