Html CSS单个字体上有两种不同的颜色（内部和外部）

我正在尝试重叠两个字体项，以便仅使用HTML/CSS创建双色调效果。如果我想让顶部变成一种颜色，底部变成另一种颜色，我可以很容易地做到这一点。但我真正想做的是使字体（图标）的外部成为一种颜色，内部变成另一种颜色

以下是用于创建顶部/底部拆分的HTML（包括fontawesome.io）：

在一个

以下是我希望它看起来的样子：

---

最后要注意的是，我只需要CSS与web工具包兼容。谢谢你能提供的任何帮助

您可以尝试不使用带有SVG图标的字体。。要使用2个SVG路径。。或具有多个路径的1 X SVG。。然后，可以为一条路径添加一种颜色，为第二条路径添加不同的颜色

请查看以下教程：

例如：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
     xml:space="preserve">

<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/> // first shape 

<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150."/> // second shape 

</svg>

//第一个形状
//第二形状

它的形状很简单，因此您可以使用：：after创建“轮廓”

.icon-li::after {
    content: ' ';
    border: 5px solid #6DCAEC;
    position: absolute;
    top: .1em;
    left: 0em;
    height: .71em;
    width: .91em;
    border-radius: 5px;
}

---

不，可能无法执行此操作。我建议只创建一个单独的图像。因此我选择了这条路线，但是我使用span而不是pseudo：：after元素实现了这个想法，因为它都在一个超链接标记中，并且：：after断开了链接。好建议！！

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
     xml:space="preserve">

<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/> // first shape 

<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150."/> // second shape 

</svg>

.icon-li::after {
    content: ' ';
    border: 5px solid #6DCAEC;
    position: absolute;
    top: .1em;
    left: 0em;
    height: .71em;
    width: .91em;
    border-radius: 5px;
}