时间戳

首页 > 解决方案 > 用本地 SVG 替换标题中的 Font Awesome

svg - 用本地 SVG 替换标题中的 Font Awesome

问题描述

我正在使用此代码段在 H1 标题前添加一个 Font Awesome 图标：

h1:before {
   content: "\f192  ";
    font-family: "FontAwesome";
    color: blueviolet;
}

如何改用本地服务（在站点的服务器上）SVG 图标？（即在 WP 媒体库中上传并使用 SVG 支持插件）

标签： svg

解决方案

如果您的图标需要保留一个单独的文件，您可以将其设置为背景图像。

h1:before {
   display: inline-block;
   background-image: url(resources/icon.svg)
}

否则，您可以将图标嵌入为数据 url。

h1:before {
   display: inline-block;
   background-image: url(data:image/svg+xml,...etc...)
}

更新

工作示例：

h1:before {
   content: " ";
   display: inline-block;
   width: 0.7em;
   height: 0.7em;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5'/%3E%3C/svg%3E");
   background-size: contain;
   background-repeat: no-repeat;
}
<h1>This is a title</h1>

推荐阅读