قرار دادن آیکن های شبکه های اجتماعی در قالب VBIranA | به سبک ال جی ایران
امتیاز:

با سلام خدمت شما عزیزان بزرگوار
اول عید سعید فطر رو به تمامی بزرگواران تبریک میگم
دوم در فکر بودم که برای تقدیم هدیه ای برای این مناسبت چه چیزی خوب هست که به فکرم این رسید
به این شکل قرار دادن آیکن های شبکه های اجتماعی در هدر سمت راست در قالب وی بی ایران A که الان خیلی از انجمن ها از اون استفاده میکنند
البته این رو هم بگم قبل از هر چیز باید FontAwesome روی قالبتون نصب شده باشه سرچ کنید آموزش نصبش هست
1- در جستجوی قالب ها واستایل ها Header رو جستجو کنیدو بعد از
•••خب بریم سراغ آموزش •••
اضافه کنیدکد:<div class="nav">
خب حالا به جستجوی قالب ها برید و وارد additional.css بشید و اضافه کنیدکد:<div class="facebook"><a rel="nofollow" href="#"><i style="color:#fff;" class="fa fa-facebook"></i> </a></div><div class="twitter"><a rel="nofollow" href="#"><i style="color:#fff;" class="fa fa-twitter"></i> </a></div><div class="googleplus"><a rel="nofollow" href="#"><i style="color: #fff;" class="fa fa-google-plus"></i> </a></div><div class="instagram"><a rel="nofollow" href="#"><i style="color: #fff;" class="fa fa-instagram"></i> </a></div>
این هم دموی آنلاینکد:.facebook { position: absolute; margin-right: 11px; margin-top: 8px; border-radius: 100%; border: 0px solid #FFF; background: #383838 none repeat scroll 0% 0%; width: 32px; height: 32px; } .facebook i { line-height: 1.8; text-indent: 1px; font-size: 19px; } .fa-facebook:hover { color: #0462DB !important; } .facebook:hover { background: #FFF none repeat scroll 0% 0%; } .twitter { position: absolute; margin-right: 10px; font-size: 26px; margin-top: 55px; background: #383838 none repeat scroll 0% 0%; border-radius: 100%; width: 32px; height: 32px; } .twitter:hover { background: #FFF none repeat scroll 0% 0%; } .twitter i { line-height: 2.1; text-indent: 3px; font-size: 19px; transform: translate(0px, -3px); } .fa-twitter:hover { color: #08BCF8 !important; } .googleplus { position: absolute; margin-right: 10px; font-size: 26px; margin-top: 106px; background: #383838 none repeat scroll 0% 0%; border-radius: 100%; width: 32px; height: 32px; } .googleplus i { line-height: 1.8; text-indent: 3px; font-size: 21px; } .googleplus:hover { background: #FFF none repeat scroll 0% 0%; } .fa-google-plus:hover { color: #FF3903 !important; } .instagram { position: absolute; font-size: 26px; margin-top: 151px; margin-right: 10px; background: #383838 none repeat scroll 0% 0%; border-radius: 100%; width: 32px; height: 32px; } .instagram i { transform: translate(0px, -3px); text-indent: 3px; font-size: 19px; line-height: 2; } .instagram:hover { background: #FFF none repeat scroll 0% 0%; } .fa-instagram:hover { color: #A18200 !important; }
امیدوارم این هدیه رو از طرف من و تیم پی سی وب بپذیرید
موفق و موید باشید
ویرایش توسط DARKSKIES : 2015/07/18 در ساعت 02:12 AM
علاقه مندی ها (Bookmarks)