CODEWITHSUNDEEP
htmltwitter-bootstrapcss
RonTheOld
RonTheOld

Reputation: 777

Bootstrap 3 change Carousel arrows

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 :

enter image description here

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

Upvotes: 1

Views: 1048

Answers (1)

Froopy
Froopy

Reputation: 369

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.

Upvotes: 1

Related Questions