css - 如何找到图形文件来编辑社交图标

Question

我正在使用名为 Divi 的 WordPress 主题。这不是 WordPress 问题。提供了许多社交媒体图标，但我需要一个 Soundcloud 图标，但没有提供。我不明白这些图标是如何填充页面的，因为它们似乎不是图形，而是一种字体？但是，我无法从源代码中分辨出发生了什么(经验不足)。

我想做的是添加我设计的图标，或替换现有图标。如果我应该在我的文件中查找实际图标的位置，有人可以帮我指明方向吗？

您可以在这里看到一个实时站点，图标位于右上角: http://rattletree.com/wordpress2/

Facebook 图标的开发代码是这样的:

<ul class="et-social-icons">

<li class="et-social-icon et-social-facebook">
    <a href="#" class="icon">
        <span>Facebook</span>
    </a>
</li>
</ul>

css 是这样的:

.et-social-facebook a.icon:before {
content: "\e093";
}
#top-header .et-social-icon a {
font-size: 14px;
}

这让我觉得这是一种字体，但我不知道如何或在哪里可以编辑该字体？感谢您的帮助!

Answer 1

这看起来像您正在使用的字体包:

http://www.elegantthemes.com/blog/resources/elegant-icon-font

它看起来没有 soundcloud 的图标，但你可以使用云图标:



所以只需将其添加到样式表中:

.et-social-soundcloud a.icon:before {
    content: "\e002";
}

此外，这里有一个教程: https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website