L
L
Lex Fox2019-11-06 12:34:54
css
Lex Fox, 2019-11-06 12:34:54

The font awesome icons in Owl Carousel 2 are stretching strangely. How to fix it?

Good afternoon.
I'm making a full screen carousel with side arrows. Via font awesome. They are displayed, but somehow crooked.
I searched on the internet, they write that this could be due to font-size. But I didn't specify font-size anywhere.

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

    }
})
});

Has anyone encountered such a problem?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
smilingcheater, 2019-11-06
@Lex_Droid

It looks like italics have been applied to font icons. And the [i] tags used for them allude to this.
Set the
.owl-prev i, .owl-next i selector to
font-style: normal;
or use [span] instead of [i]

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question