Divi Wordpressテーマのソーシャルメディアアイコンに自分のTripadvisor（または他のカスタムアイコン）を追加するにはどうすればいいですか？

Question

Diviのテーマには、デフォルトでは4種類のソーシャルメディアアイコン（ Facebook、Twitter、Google+、RSS）のみが用意されています。

におけるコーディングのビットが含まれて/別の可能な10のあなたの子供のテーマでsocial_icons.phpをこれは、拡張することができます。 Pinterestの、LinkedInの、Tumblrの、スカイプ、Instagramの、Flikr、MySpaceは、ドリブル、YouTubeの、およびVimeoの。

私は右のサイズや色の2つのアイコンを作成するためにiconsdb.comを使用

Answer 1

...残念ながら、その拡張されたリストにないトリップアドバイザーのアイコンを追加する必要があります。右上にある色の六角形のコードを追加し、アイコンタイプトリップアドバイザーためを検索するには、その後、ゴークリック（私は7E7E7EとA0A0A0選びました）、その後、ダウンロードページに到達するためにトリップアドバイザーのアイコンをクリックしてください。

両方のサイズが36 * 36pxの.PNGカスタムを選択し、Photoshopで26pxの高さになるように切り抜きます。

アイコンをサーバーにアップロードしたら、子テーマのインクルードフォルダにある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に以下を追加する（またはこれを追加するディビブースターを使用します（結論では、はるかに簡単に、きれい：画像サイズはautoadjustmentを取得し、二つの状態のアイコンを既成や余分なCSSを追加する必要はありませんので、サイト全体用のカスタム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

私が思うには、より良い、この方法であり、 〜 D効率的な）

このコードコピー</ul>前に：あなたトリップアドバイザーのURLと

​​

（変化https://www.google.es）

が続いてダッシュボードにディビ>テーマオプション>の統合に進みます。 "ブログのヘッドコード"にコピー：

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

変更を保存し、ホームページを更新してください。

お楽しみください！