試圖將圖示引入我的作業，但我無法更改圖示的顏色（字體真棒）-有解無憂

.social-icon{
color: white;
}


.fa-solid{
  color: var(--primary-color);
}

<div class=" col-6">
  <a href=""><i class="fa-brands fa-twitter fa-40x social-icon"></i></a>
  <a href=""><i class="fa-brands fa-facebook fa-40x social-icon"></i></a>
  <a href=""> <i class="fa-brands fa-instagram fa-40x social-icon"></i></a>
</div>

<div>
  <a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
    <span class="fa fa-solid fa-circle-chevron-left  fa-1x carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
    <span class=" fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
    <span class="sr-only">next</span>
  </a>
</div>

我一直在嘗試更改社交媒體并控制圖示顏色，但我無法影響它們。檢查代碼并提供幫助。謝謝你。

uj5u.com熱心網友回復：

由于資訊很少，不清楚您要應用哪個 CSS 規則：

.social-icon{
   color: white;
}


.fa-solid{
   color: var(--primary-color);
}

假設您需要 .fa-solid 來應用，只需通過這種方式增加選擇器的特異性：

i.fa-solid{
  color: var(--primary-color);
}

參考：https : //developer.mozilla.org/en-US/docs/Web/CSS/Specificity

uj5u.com熱心網友回復：

首先，您需要連接fontawesome適當的 ;-) 然后您可以根據自己的喜好操作它 ;-)

.social-icon {
  color: blue;
}

.fa-solid {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="main.css" />
  <title>Icons</title>
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
  <div class="col-6">
    <a href=""><i class="fa-brands fa-twitter fa-40x social-icon"></i></a>
    <a href=""><i class="fa-brands fa-facebook fa-40x social-icon"></i></a>
    <a href=""> <i class="fa-brands fa-instagram fa-40x social-icon"></i></a>
  </div>

  <div>
    <a class="carousel-control-prev" href="#testimonial-cards" data-bs-slide="prev">
      <span class="fa fa-solid fa-circle-chevron-left fa-1x carousel-control-prev-icon"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#testimonial-cards" data-bs-slide="next">
      <span class="fa fa-solid fa-circle-chevron-right fa-1x carousel-control-next-icon"></span>
      <span class="sr-only">next</span>
    </a>
  </div>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360748.html

標籤：html css 推特引导字体真棒

上一篇：如何使用Javascript移動div？

下一篇：三個div的垂直對齊浮動在一個div中