slickスライダー　矢印が思うように表示されず、変更もうまくいきません。

前提・実現したいこと

スライダーの矢印が右側しか表示されないためこれを直したいのと、矢印を<>のように変更したいです。　下記の画像のすでに<>という矢印がありますが、これはその画像を保存したときにすでにあったものです。

発生している問題・エラーメッセージ

該当のソースコード

ソースコード

html

<body> <header> <ul> <li>NEW IN</li> <li>COLLECTION</li> <li>LOOKBOOK</li> <li id="logo">LAMINA</li> <li>OUR STORY</li> <li>NEWS</li> <li>STORES</li> </ul> </header>

	<div class="top-wrapper">
		<ul class="slider">
			<li><img src="img/lamina_01.jpg"></li>
			<li><img src="img/lamina_02.jpg"></li>
		</ul>
	</div>
	

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="js/slick.min.js"></script>
	<script src="js/main.js"></script>   
</body>

css
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

html {
width: 1600px;
}

header {
height: 96px;
padding-left: 244px;
padding-right: 260px;
font-family: Bodoni URW;
display: flow-root;
}

header li {
float: left;
padding-right: 46px;
padding-top: 44px;
padding-bottom: 41px;
color: #777777
}

#logo {
font-size: 36px;
padding: 37px 97px 34px 100px;
color: #111111
}

.slider {
height: 712px;
width: 1600px;
padding: 0;
}

.slider img {
width: 100%
}

.slick-prev::before,
.slick-next::before {
color: black;
}

.slick-prev {
left: 50px;
}

.slick-next {
right: 50px;
}

js
$('.slider').slick({
dots: true
});