如何将H1标题前的Font Awesome图标替换为本地部署的SVG图标

DevOps 小满

2026-9-26

调整方法如下：首先到WordPress后台媒体库找到你上传的SVG图标，复制它的完整访问URL，再根据你的需求选择对应CSS方案替换原有代码即可：

方案1：保留SVG本身原有配色

如果不需要通过CSS修改图标颜色，直接使用SVG自带的配色，使用以下代码：

h1:before {
  content: "";
  display: inline-block;
  /* 替换为你自己SVG的实际URL */
  background-image: url("https://你的站点域名/wp-content/uploads/年/月/你的图标文件名.svg");
  background-size: contain;
  background-repeat: no-repeat;
  /* 可根据实际需求调整图标尺寸 */
  width: 1.2em;
  height: 1.2em;
  /* 调整图标和标题文字的间距 */
  margin-right: 0.5em;
  /* 让图标和文字垂直对齐 */
  vertical-align: middle;
}

方案2：支持通过CSS自定义图标颜色

如果需要像原来的Font Awesome方案一样，可灵活修改图标颜色，使用以下mask方案（你已安装SVG Support插件，无需额外适配）：

h1:before {
  content: "";
  display: inline-block;
  /* 这里修改为你需要的图标颜色 */
  background-color: blueviolet;
  /* 替换为你自己SVG的实际URL */
  mask-image: url("https://你的站点域名/wp-content/uploads/年/月/你的图标文件名.svg");
  -webkit-mask-image: url("https://你的站点域名/wp-content/uploads/年/月/你的图标文件名.svg");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  /* 可根据实际需求调整图标尺寸 */
  width: 1.2em;
  height: 1.2em;
  /* 调整图标和标题文字的间距 */
  margin-right: 0.5em;
  /* 让图标和文字垂直对齐 */
  vertical-align: middle;
}