Fontawesome ve css problemi

Arkadaşlar merhaba, aşağıdaki gibi bir kod yazdım.

<section id="features" class="pt-5">
  <div class="container">
    <div class="row mt-5">
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-history"></i>
          <h3>Tarih</h3>
          <p>Test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-tree"></i>
          <h3>Doğa</h3>
          <p>Test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-leaf"></i>
          <h3>Kültür</h3>
          <p>test</p>
        </div>

      </div>
      <div class="col-md-3 text-center">
        <div class="features">
          <i class="fa fa-podcast"></i>
          <h3>Turizm</h3>
          <p>test</p>
        </div>

      </div>

    </div>

  </div>

</section>

Bu kodun css kısmı ise şöyle

#features .fa {
  color: red;
}
#features h3 {
  font-size: 50px;
}

Fakat istediğim gibi renklenmiyor.

css olarak fontawesome'daki css'i görüyor.

Nerde hata yapıyorum acaba?

!important özelliğini kullanabilirsiniz hocam öncelik fontawesome olarak geliyordur

#features .fa {
  color: red !important;
}
#features h3 {
  font-size: 50px !important;
}

Onu da denedim ama yine olmadı.

Bu arada cdn ile çekiyorum fontawesome css'i.

cdn farketmezde hocam localdemi çalışıyordunuz web ise özelden canlı demo verebilirseniz yardımcı olayım

Mümkünse gece veya yarın bakalım. Şimdi dışarı çıkmam gerekiyor.

#features i { color: red !important;}Olarak dener misiniz, birde kendi css dosyanizin fa css dosyasindan sonra eklenmesine dikkat edin

En dışarıdaki divi değil içtekini yazın ;

.features > .fa {
  color: red;
}

Gece açığım hocam özel yazdığınız vakit bakalım

Maalesef hiç biri olmadı arkadaşlar.



Maalesef hiç biri olmadı arkadaşlar.

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- STYLE CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- FONTAWESOME -->
    <link rel="stylesheet" href="css/font-awesome.css">

Sıralama bu şekilde.



Arkadaş sağolsun yardımcı oldu.

.feature i {
  color: red;
}

Şu şekilde kod yazarak istediğimi elde ettik

ben .i olarak yazmıştım.

Birde dıştaki div'i almıştım (features) ama onu içteki divi alarak işlem istenileni verdi.

Tekrar teşekkür ederim