Divi theme – How can I add my own Tripadvisor (or other custom icon) to the Divi WordPress theme's social media icons?

I used iconsdb.com to create two icons of the right size and colour. Add the hex code for the color in the top right (I chose 7E7E7E and A0A0A0), click Go, then in Search for Icons type tripadvisor, then click on the tripadvisor icon to get to the download page.

EDIT: It looks like iconsdb.com no longer has the Tripadvisor icon. However you can still find lots of versions if you Google "Tripadvisor icon SVG".

Choose .PNG custom size of 36*36px for both and then crop down in Photoshop to 26px high.

Once you’ve uploaded the icons to your server, open the social_icons.php file in the includes folder of your child theme. Just before the

    </ul>

tag near the end of the file, add the following code:

<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>

Then add the following to style.css in your child theme (or use Divi Booster to add this custom CSS for the whole site)...

.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>");
}