如何使用JavaScript修改Bootstrap图标的颜色、尺寸等属性

问题根因说明 #

1. 你引入的是Bootstrap Icons的字体版本，fill属性仅对SVG格式的图标生效，字体图标需要通过color属性修改颜色
2. 字体图标本质是特殊字体，不需要调整宽高，直接修改font-size属性即可放大缩小尺寸

修正后完整代码 #

HTML代码

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
  <div id="posts"></div>
</body>

JS代码

document.addEventListener('DOMContentLoaded', function () {
  var heart = document.createElement('i')
  heart.className = 'bi bi-heart'
  // 调整font-size数值即可修改图标大小，可按需改成24px、3em等其他值
  heart.style.fontSize = '2rem'
  document.querySelector('#posts').append(heart)

  heart.onclick = function () {
    this.className = 'bi bi-heart-fill'
    // 字体图标通过color属性控制颜色
    this.style.color = 'red'
  }
})

可选优化：支持点击来回切换状态 #

如果需要点击图标可以在空心/红色填充之间切换，将点击事件替换为以下代码即可：

heart.onclick = function () {
  const isFilled = this.classList.contains('bi-heart-fill')
  this.className = isFilled ? 'bi bi-heart' : 'bi bi-heart-fill'
  this.style.color = isFilled ? 'inherit' : 'red'
}

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