Css Laravel 7字体和猫头鹰旋转木马

我想更改我的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

文件转换的文件的图片：

在添加此css代码之前，我有一个从instagram获取图像的旋转木马：

@isset（媒体）
@如果（计数（$media）>0）
@foreach（$media as$post）
@endforeach
@恩迪夫
@尾端集

以下是运行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>

然而在我添加字体代码后，即使没有引用任何文件，只要调用函数

@font-face{}

就破坏了整个instagram部分，但在其他所有方面都很好地发挥了作用图片如下：

在Inspect元素之后，似乎每个项目都占据了给定引导容器的整个宽度100%，并且垂直堆叠，而不显示instagram图片

PS:这是主题的报告，更改在

css/styles中。css

请检查所有：

我怎样才能解决这个问题

谢谢：）

---

非常感谢

从

style.css

文件中删除

@font-face

，并将其移动到另一个文件中修复了该问题

看起来这是一条死胡同：(

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