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

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），单击Go，然后在Search for Icons中输入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>主题选项>集成。在“博客头代码”上复制这个：

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

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

请享用！