Bootstrap 3 更改旋转木马箭头

Question

Hi guys i am using bootstraps Carousel options and i would like to change the arrows as i think they are ugly.

I would like to make them look like this :

However I'm not so sure how to do this, i tried to create them using CSS but i can only get the box to show up , so far i have :

HTML:

<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="lnr lnr-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="lnr lnr-chevron-right" aria-hidden="true"></span>
</a>

CSS:

.carousel-control.left, .carousel-control.right {
  background-image: none !important;
}

.carousel-control {
  font-size: 20px;
  text-shadow: none;
}

.carousel-control .lnr-chevron-left {
  position: absolute;
  color: white;
  background: #333333;
  top: 48%;
  left: 0;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  float: left;
  padding: 15px;
}

.carousel-control .lnr-chevron-right {
  position: absolute;
  color: white;
  background: #333333;
  top: 48%;
  right: 0;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  float: right;
  padding: 15px;
}

I was using this websites Example but i cant seem to replicate it : Link here

Any help on trying to make the arrows look like this would be great

Thanks

Answer 1

Looking in the linear-icons.css file, I notice there is the following:

 @font-face { font-family: 'Linearicons-Free'; src:url('../fonts/Linearicons-Free.eot?w118d'); src:url('../fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'), url('../fonts/Linearicons-Free.woff2?w118d') format('woff2'), url('../fonts/Linearicons-Free.woff?w118d') format('woff'), url('../fonts/Linearicons-Free.ttf?w118d') format('truetype'), url('../fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg'); font-weight: normal; font-style: normal; } .lnr { font-family: 'Linearicons-Free'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Verify you have also gotten the font files as the .lnr class uses a font they provide.