HTML中select选项内Font Awesome图标无法显示问题求助

问题原因 #

原生<select>的<option>元素在多数浏览器中不支持自定义图标字体，浏览器会强制使用系统默认字体渲染下拉列表里的选项，导致Font Awesome图标无法正常展示；而选中项是在<select>本身渲染，所以能正常显示。

解决方案 #

放弃原生<select>，用HTML+CSS+JS实现自定义下拉组件，完全控制样式：

自定义下拉组件代码 #

HTML

<div class="custom-dropdown">
  <div class="dropdown-selected" id="selectedView">
    <span class="fa-icon">&#xf03a;</span> Classic
  </div>
  <div class="dropdown-options">
    <div class="dropdown-option" data-value="classic">
      <span class="fa-icon">&#xf03a;</span> Classic
    </div>
    <div class="dropdown-option" data-value="compact">
      <span class="fa-icon">&#xf0c9;</span> Compact
    </div>
    <div class="dropdown-option" data-value="table">
      <span class="fa-icon">&#xf0ce;</span> Table
    </div>
  </div>
  <!-- 隐藏原生input用于表单提交 -->
  <input type="hidden" id="dropdownview" name="dropdownview" value="classic">
</div>

CSS

@font-face {
  font-family: "FontAwesome";
  font-weight: 600;
  font-style: normal;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}

.custom-dropdown {
  position: relative;
  width: fit-content;
}

.dropdown-selected {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-family: FontAwesome, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: white;
  display: none;
  z-index: 100;
}

.dropdown-option {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-family: FontAwesome, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-option:hover {
  background-color: #f5f5f5;
}

.custom-dropdown.active .dropdown-options {
  display: block;
}

.fa-icon {
  font-family: FontAwesome !important;
}

JavaScript

const customDropdown = document.querySelector('.custom-dropdown');
const selectedView = document.getElementById('selectedView');
const dropdownOptions = document.querySelectorAll('.dropdown-option');
const hiddenInput = document.getElementById('dropdownview');

// 切换下拉列表显示/隐藏
selectedView.addEventListener('click', () => {
  customDropdown.classList.toggle('active');
});

// 选择选项
dropdownOptions.forEach(option => {
  option.addEventListener('click', () => {
    const icon = option.querySelector('.fa-icon').textContent;
    const text = option.textContent.trim().replace(icon, '').trim();
    selectedView.innerHTML = `<span class="fa-icon">${icon}</span> ${text}`;
    hiddenInput.value = option.dataset.value;
    customDropdown.classList.remove('active');
  });
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!customDropdown.contains(e.target)) {
    customDropdown.classList.remove('active');
  }
});

方案说明 #

• 自定义组件完全脱离原生select的限制，所有元素都能正常加载Font Awesome字体；
• 保留隐藏的<input>元素，确保表单提交时能正确传递选中值；
• 交互逻辑和原生select一致，同时支持自定义样式美化。

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