أضافة ايقونات المواقع الاجتماعية بأستخدام font awesome

لاضافة ايقونات المواقع الاجتماعية بأستخدام font-awesome اتبع الخطوات التالية

1- اذهب الى تعديل القالب >>خذ نسخة احتياطية من القالب >>ابحث (ctrl+f) عن <head> .

2-تحته (أسفله) قم بأضافة الكود التالى

<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</div>
<style>
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid  #f8a82a;
color: #f8a82a;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: white;
border: 1px solid  white;

}
</style>

4-قم بأستبدل url-here برابط التواصل الاجتماعى الخاص بك ثم احفظ القالب

أضافة ايقونات المواقع الاجتماعية بأستخدام font awesome

Post a Comment

Labels

Popular Posts