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的图标，但你可以使用云端：

&#xe002;

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

.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

Answer 2

要添加设计图标，请将以下代码添加到样式表中。

#top-header .et-social-icon.soundcloud a {
    width: 15px;
    height: 25px;
}
.soundcloud a.icon:before {
    content: "";
    background: url('https://placehold.it/15x25') 100% 100% no-repeat;
    height: 100%;
    width: 100%;
    display: inline-block;
}

确保创建图标，将图标图像添加到主题文件夹，然后更新上述代码中的网址以指向该图像。

同时将类soundcloud添加到WordPress后端的菜单中。

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

2 个答案: