رفتن به مطلب

آیکون شبکه های اجتماعی


ehsanchch

پست های پیشنهاد شده

سلام وقتتون بخیر

 

دارم ایکون های شبکه اجتماعی رو در یه برگه وردپرس جای سازی میکنم ولی  تو یه سطح قرار نمیگرن و زیر هم میان راهی داره که کنار هم قرار بگیرن 

 

تصویر پیوست اول منظورم رو نمایش میده در کد زیر هم کد رو توی ویرایش گر در حالت یه جدول منتشر کردم گفتم شاید باعث مرتب سازیش بشه و بیان کنار هم ولی بازم بعد از ذخیره کنار هم نبود و رفتن زیر هم

[su_column size="1/1"]<div class="social">
  <a href="https://go.20script.ir/index.php?url=https://facebook.com/ondrej.p.barta" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
  <a href="https://go.20script.ir/index.php?url=https://twitter.com/PageOnlineXS" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
  <a href="https://go.20script.ir/index.php?url=https://plus.google.com/+OndřejBárta-Otaku" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
</div>[/su_column]

 

اینم css 

 


.social {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 70px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
}

البته توی فایل جداگانه html پیادش میکنم درسته ولی نمیدونم چرا در وردپرس با مشکل مواجه میشم
 

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

درود.

این رو تست کنید:

کد HTML:

<div class="social">
  <a href="https://facebook.com/ondrej.p.barta" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
  <a href="https://twitter.com/PageOnlineXS" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
  <a href="https://plus.google.com/+OndřejBárta-Otaku" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
</div>

 

و کدهای CSS :

کدهای قبلی که داخل تاپیک گفتید هم شامل میشه پس کدهای CSS قبلیتون رو پاک کنید از قالب:

.social {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  display: inline-flex;
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 70px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
} 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...