如何在CSS中用Font Awesome图标替代背景图（非HTML方式）

嘿，我明白你遇到的问题了——尝试用伪元素给.tour-orb替换成Font Awesome图标背景，但加了content却没生效对吧？咱们一步步解决这个问题，同时给你几种纯CSS的实现思路。

首先修复你现有代码的问题 #

你当前的代码里有两个关键问题导致图标不显示：

1. 重复声明了font-family，这会导致样式冲突；
2. Font Awesome 5的免费图标需要指定对应的font-weight（solid样式是900，regular是400），否则图标无法渲染。

修正后的代码如下，我还优化了图标居中的定位：

.tour-orb {
  z-index: $tour-zindex - 2;
  width: 30px !important;
  height: 30px !important;
  position: relative !important;
  background-color: transparent !important; /* 隐藏原元素背景，让伪元素的内容显示 */
}

.tour-orb:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important; /* 核心：Font Awesome 5免费solid图标必须加这个权重 */
  content: "\f02d" !important; /* 锁图标的Unicode */
  position: absolute !important;
  font-size: 25px !important;
  background-color: #ebe8e8 !important;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  /* 让图标在圆形背景里居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 定位到父元素中心 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

另一种思路：直接用SVG作为背景图 #

如果你不想用伪元素，还可以把Font Awesome的SVG图标转成Data URI，直接作为元素的background-image，完全不需要额外的HTML元素：

.tour-orb {
  z-index: $tour-zindex - 2;
  width: 30px !important;
  height: 30px !important;
  position: relative !important;
  /* 这里的SVG对应Font Awesome的锁图标（f02d），fill设置图标颜色，size控制图标大小 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-60-60c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM380.4 206.6l-111-111c-4.7-4.7-12.3 4.7-17 0l-46.1 46.1c-4.7 4.7-4.7 12.3 0 17l111 111c4.7 4.7 12.3 4.7 17 0l46.1-46.1c4.7-4.7 4.7-12.3 0-17zM163.8 168.1l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17z' fill='%23333'/%3E%3C/svg%3E") center/contain no-repeat;
  /* 单独设置圆形背景色 */
  background-color: #ebe8e8;
  border-radius: 50%;
}

这种方法的好处是不用依赖伪元素，直接给目标元素设置背景，适合样式更简洁的场景。你可以通过调整SVG里的fill属性改变图标颜色，或者用background-size控制图标大小。

内容的提问来源于stack exchange，提问作者M.Chaymae