Question

默认情况下，Divi主题只附带4个可能的社交媒体图标： Facebook，Twitter，Google +和RSS。

这可以扩展，在您的子主题中包含/ social_icons.php中的一些编码到另一个可能的10： Pinterest，LinkedIn，Tumblr，Skype，Instagram，Flikr，MySpace，Dribble，YouTube和Vimeo。

我需要添加一个TripAdvisor图标，遗憾的是，该图标不在该扩展列表中。

Answer 1

我使用 iconsdb.com 创建了两个大小和颜色正确的图标。在右上角添加颜色的十六进制代码（我选择7E7E7E和A0A0A0），单击转到，然后在搜索图标中键入 tripadvisor ，然后单击tripadvisor图标以进入下载页面。

为两者选择.PNG自定义尺寸为36 * 36px，然后在Photoshop中裁剪为26px高。

将图标上传到服务器后，打开子主题的includes文件夹中的social_icons.php文件。

之前

    </ul>

标记靠近文件末尾，添加以下代码：

<li class="et-social-icon et-social-tripadvisor"><a href="YOUR TRIPADVISOR REVIEWS URL" class="icon"><span><?php esc_html_e( 'tripadvisor', 'Divi' ); ?></span></a></li>

然后在您的子主题中将以下内容添加到style.css（或使用Divi Booster为整个网站添加此自定义CSS）...

.et-social-tripadvisor a {
display: block;
margin-left: 11px;
}

.et-social-tripadvisor a:hover img {
opacity: 0;
}

.et-social-tripadvisor a:hover {
background: rgba(0, 0, 0, 0) url("<PATH TO YOUR HOVER STATE ICON>") no-repeat scroll 0 0 / 100% auto;
display: block;
}

.et-social-tripadvisor a.icon::before {
    content: url("<PATH TO YOUR NORMAL STATE ICON>");
}

Answer 2

我认为这种方法更好，因为图像大小得到自动调整，并不需要预先制作两个状态图标或添加额外的CSS :(总之，更容易，更干净，更有效）

在</ul>复制此代码之前：

<li class="et-social-icon">
<a href="https://www.google.es" class="icon">
<i class="fab fa-tripadvisor"></i>
</a>
</li>

（用tripadvisor的网址更改https://www.google.es）

然后进入仪表板转到Divi＆gt;主题选项＆gt;整合。在“博客头代码”上复制这个：

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

保存更改，刷新您的主页。

享受！

如何将自己的Tripadvisor（或其他自定义图标）添加到Divi Wordpress主题的社交媒体图标？

2 个答案: