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

با سلام خدمت شما عزیزان بزرگوار

اول عید سعید فطر رو به تمامی بزرگواران تبریک میگم

دوم در فکر بودم که برای تقدیم هدیه ای برای این مناسبت چه چیزی خوب هست که به فکرم این رسید

به این شکل قرار دادن آیکن های شبکه های اجتماعی در هدر سمت راست در قالب وی بی ایران A که الان خیلی از انجمن ها از اون استفاده میکنند

البته این رو هم بگم قبل از هر چیز باید FontAwesome روی قالبتون نصب شده باشه سرچ کنید آموزش نصبش هست

•••خب بریم سراغ آموزش •••

1- در جستجوی قالب ها واستایل ها Header رو جستجو کنیدو بعد از

کد:

<div class="nav">

اضافه کنید

کد:

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

خب حالا به جستجوی قالب ها برید و وارد additional.css بشید و اضافه کنید

کد:

.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;
}

این هم دموی آنلاین

انجمن تخصصی ال جی ایران

امیدوارم این هدیه رو از طرف من و تیم پی سی وب بپذیرید

موفق و موید باشید