Question

我想更改Laravel网站的字体，因此我在@font-face文件中使用了style.css，并在字体中添加了源代码。这是我的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>

如何在我添加了字体代码后，即使没有引用任何文件也只是调用了函数@font-face {}破坏了整个instagram部分，但在所有其他方面都做到了完美： {3}}

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

PS：这是css/styles.css中所做更改的主题的仓库，请检查所有：

我该如何解决？

谢谢：）

已通过

Answer 1

从@font-face文件中删除style.css并将其移至其他文件可解决此问题

Laravel 7字体和猫头鹰轮播

1 个答案: