【Swiper.js】矢印をFontAwesomeに変更する

Javascriptのスライドショーライブラリ【Swiper.js】で矢印をFontAwesomeで変更にするということをやっています。
で、実際にこれは実現できたんですが。優先度が混乱していて!importantで強制的に変更しています。

本来であれば!imporatantなど使わなくても、簡単に変更できたはずなのですが変更することができず無理矢理変更した感じです。
原因がわからずもやもやしているので、なぜ、FontAwesomeができなかったのか知りたいなと思っています。

確認したこと

・FontAwesome自体は読み込めている
・検証で見た結果、どうやら優先度が低い(自分が書いたものよりもデフォルトのfont-familyが優先されてしまっていて上書きできない)

です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>

    <!-- Slider main container -->
    <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"><img src="./img/annie-spratt-l5Uf07txOcA-unsplash.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/glen-carrie-vTKwzbWPdxA-unsplash.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./img/gopi-selva-NrosLIRcrkA-unsplash.jpg" alt=""></div>
    </div>

    <div class="swiper-pagination"></div> 

  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>



<script src="script.js"></script>
<script src="https://kit.fontawesome.com/c4b97a70eb.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
コード

もともと!important使わなくても以下の記述で上書きできた気がします。

@charset "utf-8";

body{
    margin: 0;
    padding: 0;
}
img{
    max-width: 100%;
    height: auto;
}
.swiper-button-next::after, 
.swiper-button-prev::after{
    font-family: "Font Awesome 5 Free"!important;
    font-weight: 900;
    font-size: 5.6em;
}
.swiper-button-next::after{
    content: "\f0a9"!important;
}

.swiper-button-prev::after{
    content: "\f0a8"!important;
}

.swiper-container {
    margin-top: 40px;
    width: 90%;
    height: 90vh;
}

コード

const swiper = new Swiper('.swiper-container', {
    // Optional parameters
    loop:true,
    autoplay:{
        delay:2000,
        disableOnInteraction: false,
    },
    effect:"fade",
    speed:5000,


    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
コード

行動規範の内容に同意します

回答1件

ベストアンサー

読み込みの順番が原因ではないでしょうか。

https://unpkg.com/swiper/swiper-bundle.min.cssのファイルを読み込んだ時点でデフォルトのアイコンが指定されますので、このファイルの読み込みの後にご自身のCSSファイルを読み込めば!importantは不要になるかと思います。

おそらくstyle.cssがご自身のCSSファイルでしょうから、以下の順に変更してみてはいかがですか？

html
1    <!-- <link rel="stylesheet" href="style.css"> -->
2    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> -->
3
4    <!-- 以下の順に変更 -->
5    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
6    <link rel="stylesheet" href="style.css">