Laravel 7 字体和 Owl 轮播

Question

我想更改 Laravel 网站的字体，所以我在 style.css 文件中使用 @font-face 并将源添加到字体；所以这是我的 css 代码：

@font-face {
  font-family: 'Adlanta';
  font-style: 'normal';
  font-weight: '700';
  src: url('../webfonts/Adlanta/regular/Adlanta.eot');
  src: url('../webfonts/Adlanta/regular/Adlanta.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/Adlanta/regular/Adlanta.woff2') format('woff2'),
       url('../webfonts/Adlanta/regular/Adlanta.woff') format('woff'),
       url('../webfonts/Adlanta/regular/Adlanta.ttf') format('truetype'),
       url('../webfonts/Adlanta/regular/Adlanta.svg#Adlanta') format('svg');
}

body {
     color: #666666;
     font-size: 15px;
     font-family: 'Adlanta', sans-serif;
     line-height: 1.80857;
}

这是我从本网站上的 .otf 文件转换而来的文件的图片：Converter site:

在添加此 css 代码之前，我有这个从 Instagram 获取图像的轮播：

<?php
    try {
        $media = App\Traits\Instagram::feed();
    } catch (Exception $e) {
        //
    }

?>
@isset($media)
@if(count($media) > 0)
<!-- Start Instagram Feed  -->
<div class="instagram-box">
    <div class="main-instagram owl-carousel owl-theme">
        @foreach($media as $post)
        <div class="item">
            <div class="ins-inner-box">
                <img src="{{ $post['imageThumbnailUrl'] }}" alt="" />
                <div class="hov-in">
                    <a href="{{ $post['link'] }}" target="_blank"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
<!-- End Instagram Feed  -->
@endif
@endisset

这是在运行由 JavaScript 添加的网站之后添加的代码：

<div class="instagram-box">
        <div class="main-instagram owl-carousel owl-theme owl-loaded owl-drag">    
        <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-702px, 0px, 0px); transition: all 0.25s ease 0s; width: 1560px;"><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-06.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-07.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-08.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-09.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-05.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-01.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-02.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-03.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-04.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item active" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-05.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item active" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-06.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item active" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-07.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item active" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-08.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item active" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-09.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-05.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-01.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-02.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-03.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-04.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div><div class="owl-item cloned" style="width: 78px;"><div class="item">
                <div class="ins-inner-box">
                    <img src="images/instagram-img-05.jpg" alt="">
                    <div class="hov-in">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div></div></div></div><div class="owl-nav"><button type="button" role="presentation" class="owl-prev"><i class="fas fa-arrow-left"></i></button><button type="button" role="presentation" class="owl-next"><i class="fas fa-arrow-right"></i></button></div><div class="owl-dots disabled"></div></div>
    </div>

HOWEVER 在我添加字体代码后，即使没有引用任何文件只是调用函数 @font-face {} 破坏了整个 instagram 部分但是在其他所有事情上都完美地工作在这里图片是：

在检查元素之后，似乎每个项目都占据了给定 bootstrap 容器的整个宽度的 100%，并且垂直堆叠它们而不显示 Instagram 图片。

PS: 这是主题的回购 css/styles.css 请检查所有 repo:

我该如何解决？

谢谢:)

非常感谢

Answer 1

从 style.css 文件中删除 @font-face 并将其移动到其他文件解决了问题

Laravel 7 字体和 Owl 轮播

Laravel 7 Fonts And Owl Carousel

css

fonts

carousel

laravel-7