slickスライダーにFontawesomeが適用されません。

slickスライダーの矢印部分をFontawesomeを用いて変更したいのですが、透明な四角がでてきます。
HTMLにFontawesomeのアイコンを書き込むと表示されるので、cdnやバージョンには問題がないと思います。　どうすれば表示されるか教えていただきたいです。　
※cssにはcontent: "\f104"; のように書き込み表示されず、htmlには<i class="">形式で書き込むと表示されました。
また、2枚目の画像の矢印は元々の画像のものなので、関係なしです。

HTML
1<head>
2		<meta charset="UTF-8">
3		<title>LAMINA</title>
4		<link rel="stylesheet" type="text/css" href="css/ress.css">
5		<link rel="stylesheet" type="text/css" href="css/slick.css">
6		<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
7		<link rel="stylesheet" type="text/css" href="css/style.css">
8		<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9<html>
10</head>
11
12
13	<body>
14    	<header>
15    		<ul>
16    			<li>NEW IN</li>
17    			<li>COLLECTION</li>
18    			<li>LOOKBOOK</li>
19    			<li id="logo">LAMINA</li>
20    			<li>OUR STORY</li>
21    			<li>NEWS</li>
22    			<li>STORES</li>
23    		</ul>
24    	</header>
25
26    	<div class="top-wrapper">
27    		<ul class="slider">
28    			<li><img src="img/lamina_01.jpg"></li>
29    			<li><img src="img/lamina_02.jpg"></li>
30    			<li><img src="img/lamina_01.jpg"></li>
31    		</ul>
32    	</div>
33		
34
35		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
36		<script src="js/slick.min.js"></script>
37		<script src="js/main.js"></script>   
38	</body>
39</html>
40

css
1コード
2
3html, body,
4ul, ol, li,
5h1, h2, h3, h4, h5, h6, p, div {
6  margin: 0;
7  padding: 0;
8}
9
10li {
11	list-style: none;
12}
13
14html {
15	width: 1600px;
16}
17
18header {
19    height: 96px;
20    padding-left: 244px;
21    padding-right: 260px;
22    font-family: Bodoni URW;
23    display: flow-root;
24}
25
26header li {
27	float: left;
28	padding-right: 46px;
29	padding-top: 44px;
30	padding-bottom: 41px;
31	color: #777777
32}
33
34#logo {
35	font-size: 36px;
36	padding: 37px 97px 34px 100px;
37	color: #111111
38}
39
40
41
42.slider  {
43	height: 712px;
44	width: 1600px;
45	padding: 0;
46}
47
48.slider img {
49	width: 100%
50}
51
52.slick-prev:before {
53	position: relative;
54	color: black;
55	content: "\f104";
56	font-family: "Font Awesome 5 Free";
57}
58
59.slick-next:before {
60	position: relative;
61	color: black;
62	content: "\f105";
63	font-family: "Font Awesome 5 Free";
64}
65
66
67.slick-prev {
68	left: 35px;
69	z-index: 100;
70}
71
72.slick-next {
73	right: 35px;
74	z-index: 100;
75}

Lhankor_Mhy

2020/04/10 11:33

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7

sawamaru

2020/04/12 09:08

変更しました。よろしくお願いします。

Lhankor_Mhy

2020/04/12 12:18

追記をご覧ください。

sawamaru

2020/04/13 09:52

追記とはカラー指定をしていてはというアドバイスのことでしょうか？　上の変更でいれてはあるのですが、変化ありません、

Lhankor_Mhy

2020/04/13 12:47 編集

ああ、コードを変更したのですね。それなら一言いただければ話が早かったのですが。

行動規範の内容に同意します

回答1件

ベストアンサー

フォントファミリーを指定していないからでは？

css
1	font-family: "Font Awesome 5 Free";

Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合 - Qiita

コメントを受けて追記

色の指定をしていないからでは？

css
1    color: black;

質問変更を受けて追記

font-weightを指定してみては？

css
1font-weight: 900;

投稿2020/04/10 11:47

編集2020/04/14 01:14

Lhankor_Mhy

総合スコア36074

sawamaru

2020/04/11 09:37

.slick-prev:before { position: relative; content: "\f104"; font-family: "Font Awesome 5 Free"; } .slick-next:before { position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; } このようにしたのですが変化ありません。。