Bootstrap 3更改Carousel箭头

Question

大家好我正在使用bootstraps Carousel选项，我想改变箭头，因为我觉得它们很难看。

我想让它们看起来像这样：

但是我不太确定如何做到这一点，我试图用CSS创建它们，但我只能让盒子显示出来，到目前为止我有：

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;
}

我正在使用这个网站示例，但我似乎无法复制它：Link here

试图让箭头看起来像这样的任何帮助都会很棒

由于

Answer 1

查看linear-icons.css文件，我注意到以下内容：

@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;
}

验证您还获得了字体文件，因为.lnr类使用了他们提供的字体。