Мне нужен вывод, как показано ниже

enter image description here

Мой HTML-код, как показано ниже

<div>
    <i class="fas fa-caret-up"></i>
</div>
<div>
    <i class="fas fa-caret-down"></i>
</div>

Мой код CSS, как показано ниже

   .fa, .fas {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: #000;
        font-size: 30px;
        border: 1px solid;
    }

Я получаю вывод, как показано ниже

enter image description here

0
abu abu 24 Окт 2019 в 09:05

3 ответа

Лучший ответ

Попробуйте это один раз ..

.arrow i {
	font-size: 50px;
	margin: 2px 0;
	padding: 0 3px;
	line-height: 20px;
}
.arrow {
	line-height: 1px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="arrow up"><i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
<div class="arrow down"><i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
1
Sunil Rajput 24 Окт 2019 в 06:49
.ab{
	
 border: 1px solid;
	width:30px;
	height:40px;
	margin-left:30px;
	
	
}
.ac{
	
 border: 1px solid;
	width:30px;
	height:40px;
	margin-left:30px;
	margin-top:10px;
		
	
}
<div class="ab"><i class="fa fa-caret-up" style="font-size:48px;"></i></div>
<div class="ac"><i class="fa fa-caret-down" style="font-size:48px;"></i></div>
1
shivangi yadav 24 Окт 2019 в 07:51

Попробуйте это CSS:

.fa-caret-down{
position:relative;
}

.fa-caret-down:before {
    content: "\f0d7";
    position: absolute;
    bottom: 0px;
}
.fa, .fas {
    font-weight: 900;
    color: #000;
    font-size: 30px;
}
1
Akshita Karetiya 24 Окт 2019 в 06:21
58535070