اذهب الى > التخطيط > اضافة اداة > html > ونضيف هذا الكود
<div id='social_networks'>
<ul><!--Social Icons Started Started-->
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-2x'/><span class='inv'>Facebook</span></a></li>
<!--Replase With Facebook URL-->
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-2x'/><span class='inv'>twitter</span></a></li>
<!--Replase With Twitter URL-->
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-2x'/><span class='inv'>googleplus</span></a></li>
<!--Replase With Google Plus URL-->
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-2x'/><span class='inv'>linkedin</span></a></li>
<!--Replase With Linked In URL-->
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-2x'/><span class='inv'>youtube</span></a></li>
<!--Replase With Youtube URL-->
</ul><!--Social Icons Started End-->
</div>
<Style>
#social_networks{width:100%;display:block;margin:0 auto;text-align:center;}
#social_networks ul {list-style:none;}
#social_networks{text-align:center;display:block;margin:0 auto;padding-bottom:15px;margin-bottom:15px;}
#social_networks ul {display:block;height:36px;margin:0 auto;list-style:none;color:#fff;transition:All 0.2s ease;}
#social_networks li{text-align:center;display:inline-block;margin:0 auto;margin-right:2px;margin-left:2px;width:48px;height:48px;opacity:0.9;transition:All 0.2s ease;}
#social_networks li:hover{opacity:0.9;}
#social_networks li a{display:inline-block;width:48px;height:48px;line-height:48px;padding-top:5px;padding-bottom:5px;color:#fff;}
#social_networks li a:hover{background:transparent;color:#f35d5c;box-shadow:none;}
#social_networks li a span{display:none;visibility:hidden;}
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.linkedin{text-align:center;background:#f35d5c;color:#fff;}
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.linkedin:hover{background:#4b3f57;color:#fff;}
#social_networks li.facebook .fa.fa-facebook,#social_networks li.twitter .fa.fa-twitter,#social_networks li.youtube .fa.fa-youtube,#social_networks li.googleplus .fa.fa-google-plus,#social_networks li.linkedin .fa.fa-linkedin{color:#fff;}
</Style>
- نقوم باستبدال رمز # برابط مواقعك الاجتماعية.
- نقوم باستبدال هذا الكود بأى لون تريد #f35d5c (كود اللون الاحمر).
- نقوم باستبدال هذا الكود بأى لون تريد #4b3f57 (كود اللون الاسود).
