You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改Tab中Google Font图标的颜色（不影响文字样式）

avatar
数据老陈
2026-7-25
问题描述

我编写的Tab按钮样式存在问题，需求如下：

  • Tab按钮非激活状态：Google Font Material Icons图标设为橙红色，文字颜色保持不变
  • Tab按钮激活状态：图标与文字均改为白色

尝试通过hover样式调整未解决问题，希望得到代码修正帮助。以下是我的相关代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<link rel="stylesheet" href="https://belipulsa.co.id/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css">      

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
</style>

<style>
* {
box-sizing: border-box
}

/* Style the tab */
.tab {
  float: left;
  border: none;

  width: 30%;
  height: 300px;
  
}


/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: right;
  cursor: pointer;
  transition: 0.3s;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border-radius: 16px;


}
.active, .tab button:hover {
  background-color: #FF9B23;
  color: white;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #FF9B23;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #FF9B23;
color: white;
}

/*======================*/
.tab2 {
  float: right;
  border: none;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab2 button {
  display: block;
  background-color: inherit;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border-radius: 16px;

}
.active, .tab2 button:hover {
  background-color: #FF9B23;
  color: white;
}
/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #FF9B23;
}

/* Create an active/current "tab button" class */
.tab2 button.active {
  background-color: #FF9B23;
}
/*======================*/

/* Style the tab content */
.tabcontent {
  float: center;
  padding: 0px 12px;
  border: none;
  width: 70%;
  border-left: none;
  height: 300px;
  text-align: center;
}

.p1 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }
  .p2 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }
  .p3 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }
  .p4 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }
  .p5 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }
  .p6 {
  font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
  }

.material-icons.md-inactive { color: red; }
.material-icons { color: black; }

</style>
</head>
<body>
<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'daftar')" id="defaultOpen">
  
<span class="material-icons">face</span>
<span class="material-icons">face</span>
                            
  <p class="p1">Daftar Gratis Tanpa Biaya</p>
  
<p class="x1">Hanya bermodalkan smartphone dan koneksi internet Anda dapat melakukan transaksi tanpa dipungut biaya registrasi.
  
  </button>
  
  
  <button class="tablinks" onclick="openCity(event, 'trx')"><span class="material-icons md-dark md-inactive">calendar_today</span><p class="p2">Beragam Cara Transaksi</p>Nikmati beragam metode transaksi dengan mudah melalui aplikasi android, WhatsApp, Telegram tanpa kode produk.</button>
  <button class="tablinks" onclick="openCity(event, 'cs')"><span class="material-icons md-dark md-inactive">calendar_today</span><p class="p3">24 Jam Layanan</p>Kemudahan bertransaksi dan layanan bantuan customer service selama 24 jam non stop dari aplikasi Raja Payment.</button>
</div>
<div class="tab2">
  <button class="tablinks" onclick="openCity(event, 'sms')"><span class="material-icons md-dark md-inactive">calendar_today</span><p class="p4">SMS Report to End User</p>Pelanggan Anda akan menerima notifikasi SMS yang berisi nama outlet/konter Anda setelah transaksi berhasil.</button>
  <button class="tablinks" onclick="openCity(event, 'rekap')"><span class="material-icons md-dark md-inactive">calendar_today</span><p class="p5">Rekap Piutang Transaksi</p>Anda dapat membuat dan mengelola laporan piutang dari transaksi yang dilakukan dalam periode tertentu.</button>
  <button class="tablinks" onclick="openCity(event, 'bonus')"><span class="material-icons md-dark md-inactive">calendar_today</span><p class="p6">Bonus Transaksi Terbanyak</p>Dapatkan bonus bagi yang berhasil melakukan transaksi terbanyak dalam periode tertentu.</button>
</div>

<div id="daftar" class="tabcontent">
  <img src="https://belipulsa.co.id/wp-content/uploads/2023/04/Mockup-3.png">
</div>
<div id="trx" class="tabcontent">
  <img src="http://kemoboydesign.com/themes/leon/wp-content/uploads/2017/06/features-iphone-6-slide-3.png">
</div>
<div id="cs" class="tabcontent">
    <img src="http://kemoboydesign.com/themes/leon/wp-content/uploads/2017/06/features-iphone-6-slide-2.png">
</div>
<div id="sms" class="tabcontent">
  <h3>SMS</h3>
  <p>4.</p>
</div>
<div id="rekap" class="tabcontent">
  <h3>REKAP</h3>
  <p>5.</p>
</div>
<div id="bonus" class="tabcontent">
  <h3>BONUS</h3>
  <p>6.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>
代码修正方案

核心问题分析

  1. CSS优先级冲突：.material-icons的黑色样式覆盖了.md-inactive的红色，且未针对激活状态设置图标白色
  2. 重复定义hover/激活样式，代码冗余
  3. HTML中部分按钮图标类冗余，未统一控制

修改后的完整代码 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://belipulsa.co.id/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css">      

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
</style>

<style>
* {
  box-sizing: border-box;
}

/* 统一Tab容器基础样式 */
.tab, .tab2 {
  border: none;
  width: 30%;
  height: 300px;
}

.tab { float: left; }
.tab2 { float: right; }

/* 统一Tab按钮样式，仅保留文本对齐差异 */
.tab button, .tab2 button {
  display: block;
  background-color: inherit;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  color: #333; /* 非激活状态文字默认颜色 */
}

.tab button { text-align: right; }
.tab2 button { text-align: left; }

/* 激活/hover状态统一样式 */
.tab button:hover, .tab button.active,
.tab2 button:hover, .tab2 button.active {
  background-color: #FF9B23;
  color: white;
}

/* 非激活状态图标：橙红色 */
.tab button .material-icons, .tab2 button .material-icons {
  color: #FF5722;
}

/* 激活/hover状态图标：白色 */
.tab button:hover .material-icons, .tab button.active .material-icons,
.tab2 button:hover .material-icons, .tab2 button.active .material-icons {
  color: white;
}

/* Tab内容样式修正 */
.tabcontent {
  margin: 0 auto;
  padding: 0px 12px;
  border: none;
  width: 70%;
  height: 300px;
  text-align: center;
}

/* 统一标题样式，替代冗余的p1-p6类 */
.tablinks .title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0.5em 0;
}

</style>
</head>
<body>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'daftar')" id="defaultOpen">
    <span class="material-icons">face</span>
    <span class="material-icons">face</span>
    <p class="title">Daftar Gratis Tanpa Biaya</p>
    <p>Hanya bermodalkan smartphone dan koneksi internet Anda dapat melakukan transaksi tanpa dipungut biaya registrasi.</p>
  </button>
  
  <button class="tablinks" onclick="openCity(event, 'trx')">
    <span class="material-icons">calendar_today</span>
    <p class="title">Beragam Cara Transaksi</p>
    <p>Nikmati beragam metode transaksi dengan mudah melalui aplikasi android, WhatsApp, Telegram tanpa kode produk.</p>
  </button>
  
  <button class="tablinks" onclick="openCity(event, 'cs')">
    <span class="material-icons">calendar_today</span>
    <p class="title">24 Jam Layanan</p>
    <p>Kemudahan bertransaksi dan layanan bantuan customer service selama 24 jam non stop dari aplikasi Raja Payment.</p>
  </button>
</div>

<div class="tab2">
  <button class="tablinks" onclick="openCity(event, 'sms')">
    <span class="material-icons">calendar_today</span>
    <p class="title">SMS Report to End User</p>
    <p>Pelanggan Anda akan menerima notifikasi SMS yang berisi nama outlet/konter Anda setelah transaksi berhasil.</p>
  </button>
  
  <button class="tablinks" onclick="openCity(event, 'rekap')">
    <span class="material-icons">calendar_today</span>
    <p class="title">Rekap Piutang Transaksi</p>
    <p>Anda dapat membuat dan mengelola laporan piutang dari transaksi yang dilakukan dalam periode tertentu.</p>
  </button>
  
  <button class="tablinks" onclick="openCity(event, 'bonus')">
    <span class="material-icons">calendar_today</span>
    <p class="title">Bonus Transaksi Terbanyak</p>
    <p>Dapatkan bonus bagi yang berhasil melakukan transaksi terbanyak dalam periode tertentu.</p>
  </button>
</div>

<div id="daftar" class="tabcontent">
  <img src="https://belipulsa.co.id/wp-content/uploads/2023/04/Mockup-3.png">
</div>
<div id="trx" class="tabcontent">
  <img src="http://kemoboydesign.com/themes/leon/wp-content/uploads/2017/06/features-iphone-6-slide-3.png">
</div>
<div id="cs" class="tabcontent">
    <img src="http://kemoboydesign.com/themes/leon/wp-content/uploads/2017/06/features-iphone-6-slide-2.png">
</div>
<div id="sms" class="tabcontent">
  <h3>SMS</h3>
  <p>4.</p>
</div>
<div id="rekap" class="tabcontent">
  <h3>REKAP</h3>
  <p>5.</p>
</div>
<div id="bonus" class="tabcontent">
  <h3>BONUS</h3>
  <p>6.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 默认激活第一个按钮
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

关键修改说明

  1. 合并.tab和.tab2的通用按钮样式，仅保留文本对齐差异，减少代码冗余
  2. 明确设置非激活状态图标为橙红色（#FF5722），激活/hover状态下图标与文字统一为白色
  3. 用.title类替代重复的p1-p6类，代码结构更简洁
  4. 移除HTML中冗余的md-dark md-inactive类，统一通过CSS控制图标颜色

内容的提问来源于stack exchange，提问作者kairi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.25 04:04:57