@Lex_Droid
It's just me. That's all.

Странно растягиваются иконки font awesome в Owl Carousel 2. Как исправить?

Добрый день.
Делаю карусель на весь экран с боковыми стрелками. Через font awesome. Они отображаются, но как то криво.
Искал в инете, пишут, что такое может быть из-за font-size. Но я нигде не указывал font-size.
<!DOCTYPE html>
    <html>
     <head>
      <meta charset="sUTF-8">
      
         <title>#1</title>

         <link rel="stylesheet" href="css/main.css">
         <link rel="stylesheet" href="css/owl.carousel.css">
         <link rel="stylesheet" href="css/owl.theme.default.css">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
         
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
         <link rel="icon" href="img/icon.png" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">        
     </head>



<body>

  <header class="header">
    <div class="container">
    </div>
  </header>



<section>
  <div class="container"> 
    <div class="owl-carousel owl-theme owl-nav">
        <div class="item"><img src="img/back_One.png"></div>
        <div class="item"><img src="img/back_Two.png"></div>
        <div class="item"><img src="img/back_Three.png"></div>
    </div>
  </div>
</section>

<footer>
  <div class="container">
  </div>
</footer> 


<script src="js/jquery-3.4.1.min.js"></script>  
<script src="js/owl.carousel.js"></script> 
<script src="js/script.js"></script>
</body>
    </html>


body {
	font-family: 'Simonetta', cursive;
	padding: 0;
	margin: 0;
	border: 0;
	outline: none; 
  border-collapse: collapse; 
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
} /* Обращается к body. Ставит фон и границы */

div, p, a, img, form, button {
	box-sizing: border-box;
}

a {
	text-decoration: none;
} /* Убирает линию под ссылкой */

ul, li {
	display: block;
	padding: 0;
	margin: 0;
}

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; }

.container {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width: auto;
	margin: 0 auto;
}

i {
font-family: fontawesome !important;
}

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/*--------------------------------------

--------------------------------------*/
.owl-carousel .owl-item {
    height: 655px;
}

/*.owl-carousel .owl-item {
    height: 1000px;
}*/

.owl-prev i, .owl-next i {
	color: #FFF;
}

.owl-prev i:hover, 
.owl-next i:hover {
	color: #8199A3;
}

.owl-prev, .owl-next {
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
}

.owl-prev {
	left: 15px;
}

.owl-next {
	right: 15px;
}


$(document).ready(function(){

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:0,
    nav:true,
    dots:false,
    smartSpeed: 1500,
    navText: ['<i class="fas fa-angle-left fa-5x"></i>',
    '<i class="fas fa-angle-right fa-5x"></i>'],
    afterMove: callback,
    responsive:{
        1040:{
            items:1
        }

    }
})
});


Кто нибудь сталкивался с такой проблемой?
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
smilingcheater
@smilingcheater
Выглядит, будто к шрифтовым иконкам применился курсив. И теги [i] используемые для них на это намекают.
Задайте в селекторе
.owl-prev i, .owl-next i
правило font-style: normal;
либо используйте [span] вместо [i]
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы