Как добавить свой собственный Tripadvisor (или другой пользовательский значок) в значки социальных медиа Divi Wordpress?

Question

Тема Divi по умолчанию имеет только 4 возможных значка социальных сетей: Facebook, Twitter, Google+ и RSS.

Это может быть расширен, с немного кодирования в включает/social_icons.php в вашей детской теме в другой возможный 10: Pinterest, LinkedIn, Tumblr, Skype, Instagram, Flikr, MySpace, Капля, YouTube и Vimeo ,

Мне нужно, чтобы добавить значок TripAdvisor, который, к сожалению, не в том, что расширенный список ..

Answer 1

я использовал iconsdb.com создать две иконки нужного размера и цвета. Добавьте шестнадцатеричный код цвета в правом верхнем углу (я выбрал 7E7E7E и A0A0A0), нажмите Go, затем в Поиск иконок типа TripAdvisor, а затем нажмите на иконку Tripadvisor, чтобы попасть на страницу загрузки.

Выберите произвольный размер .PNG 36 * 36px для обоих, а затем обрезайте в Photoshop до 26px high.

Как только вы загрузили значки на свой сервер, откройте файл social_icons.php в папке include вашей дочерней темы. Непосредственно перед

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

Я думаю, что лучше этот метод, потому что размер получить автоподгонки и не нужно Premade два состояний иконки или добавить дополнительные CSS: (в заключении, гораздо проще, чистыеd эффективный)

Перед </ul> Скопируйте этот код:

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

(изменение https://www.google.es с URL вашего Tripadvisor в)

Затем в панели управления перейдите к Divi> Параметры> Тема интеграции. В разделе «Код главы блога» скопируйте это:

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

Сохранить изменения, обновите домашнюю страницу.

Наслаждайтесь!