如何使用CSS修改Font Awesome图标实现响应式切换效果

给你提供两种可直接落地的CSS实现方案，优先推荐第一种，无兼容性坑：

方案1：双图标显隐控制（兼容性最优） #

仅需微调HTML结构，不需要碰FontAwesome的底层字体规则，适配所有FA版本：

调整后HTML #

<div class="col-sm down-arrow">
  <i class="fas fa-arrow-right icon-right"></i>
  <i class="fas fa-arrow-down icon-down"></i>
</div>

对应的CSS代码 #

/* 桌面端默认显示右箭头，隐藏下箭头 */
.down-arrow .icon-down {
  display: none;
}
.down-arrow .icon-right {
  display: inline-block;
}

/* 视口宽度≤768px时切换显隐 */
@media (max-width: 768px) {
  .down-arrow .icon-right {
    display: none;
  }
  .down-arrow .icon-down {
    display: inline-block;
  }
}

方案2：不修改现有HTML，伪元素覆盖图标编码 #

你之前用content设置不生效，大概率是遗漏了FontAwesome要求的font-weight属性，或者font-family和你引入的FA版本不匹配，按下面写法即可生效：

保持原有HTML不变 #

<div class="col-sm down-arrow">
  <i class="fas fa-arrow-right"></i>
</div>

对应的CSS代码 #

@media (max-width: 768px) {
  .down-arrow .fas.fa-arrow-right::before {
    content: "\f063";
    /* FontAwesome 5 配置，如果你用的是FA6，把font-family改成'Font Awesome 6 Free'即可 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
}

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