Blog TemplateMonster Türkiye

Web sitenize sosyal medya simgeleri nasıl eklenir?

Oksana Semenchuk

Sosyal medya simgelerini web sitenize eklemek, müşterilerinizle sosyal ağlar üzerinden bağlantı kurmanın, geri bildirim almanın iyi bir yoludur.

Bazı veri görselleştirme fikirlerine mi ihtiyacınız var? PPT sunum kaydırıcılar işi tamamlayacak.

Simgeler web sitenize nasıl eklenir?

Web sitenize sosyal medya simgeleri eklemenin çeşitli yolları vardır:

En uygun olanı seçebilir veya hepsini deneyebilirsiniz.

Resim olarak sosyal simgeleri ekleme (PNG, SVG, EPS, vb.)

Bir tasarımcı iseniz, simgeleri kendinize oluşturabilir veya özelleştirebilirsiniz. Ama değilseniz veya sadece zaman kazanmak istiyorsanız, simge paketlerini seçebileceğiniz ve indirebileceğiniz birçok hizmeti kullanabilirsiniz. En popüler olanları:

Vecteezy

Gereksinimlerinize en uygun olan simge paketini seçin ve indirin.

Ardından dosyaları medya kitaplığına yükleyin ve bunları aşağıdaki şekilde ekleyin (HTML web siteleri için):

<ul class="social-icons">
    <li><a href="http://www.facebook.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.twitter.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.youtube.com"><img src='path_to_your_image' /></a></li>
</ul>

Simgelerin boyutunu ve konumunu ayarlamak için stil ekleyin:

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

Flaticon

Simgeleri koleksiyonunuza ekleyin, onları indirin ve bunları kodunuza dahil edin

IconFinder

Burada da birçok ücretsiz sosyal simge paketi bulabilirsiniz. Zevkinize uygun stili bulun, bunları sosyal bloğunuza ekleyin ve sosyal ağlarda artan popülerliğin tadını çıkarın! Sosyal simgeleri SVG görüntüleri olarak uygulamanın bir yolu var.

Bunları nasıl özelleştirebileceğinizi görmek için aşağıdaki örneklere bakın:

Simge yazı tipi olarak Sosyal simgeleri ekleme

FontAwesome

FontAwesome, günümüzde muhtemelen en popüler simge yazı tipidir. Uygulanması ve kullanılması çok kolay. Bir örneğe bakalım.

Şu kodu HTML’nize ekleyin:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-google-plus"></i></a>
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-facebook-square"></i></a>
   <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-twitter-square"></i>
</div></a>

Stilleri style.css dosyanıza ekleyin ( kendi ekleyebilir veya bu örneği kullanabilirsiniz):

body {
  text-align: center;
}
.wrapper {
  display: inline-flex;
  justify-content: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #dd4b39;
}
.wrapper a:nth-child(2) {
  color: #4867AA;
}
.wrapper a:nth-child(3) {
  color: #1DA1F2;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}

Ve işte böyle çalışır:

Bu arada, FontAwesome Cheatsheet'deki diğer tüm simgeleri bulabilirsiniz

Uygulama örnekleri:

Socicon

Socicon simge yazı tipi kullanmanın başka bir yolu

01 Web sitesine git:

02 İhtiyacınız olan simgeleri seçin ve HTML kodunu aşağıdaki örnekte olduğu gibi ekleyin:

<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8">    
<ul class="socicons-list">  
</ul>

03 Ve aşağıdaki gibi bazı stilleri uygulayın:

.socicons-list {
 list-style: none;
 display: flex;
 justify-content: center;
}
.socicons-list li {
 margin: 30px 10px;
}
.socicons-list li a {
 text-decoration: none;
 padding: 30px;
 font-size: 30px;
 border-radius: 50%;
 color: #fff;
 background-color: #f1f1f1;
 transition: all ease-in-out 150ms;
}
.socicons-list li a:hover {
 text-shadow: 0 5px 10px #212121;
}
.socicons-list li:nth-child(1) a {
 background-color: #3e5b98;
}
.socicons-list li:nth-child(2) a {
 background-color: #c13584;
}
.socicons-list li:nth-child(3) a {
 background-color: #4da7de;
}
.socicons-list li:nth-child(4) a {
 background-color: #dd4b39;
}
.socicons-list li:nth-child(5) a {
 background-color: #1769ff;
}

04 Nasıl çalıştığını görmek için demoyu tıklayın:

WP widget'ını kullanarak simgeleri uygulaması

Web siteniz WordPress üzerinde oluşturulmuşsa, bir WordPress widget'ını kullanarak sosyal simgeler içeren bir blok eklemenin harika bir yolu vardır. Hikayeyi kısaltmak için sadece bu eğiticiyi izleyin:

WP eklentisi ile sosyal medya simgeleri eklemesi

Sosyal hesapların sayfanıza eklenmesinde yararlı olabilecek farklı eklentilere göz atabilirsiniz. Sosyal Medya Simgeleri eklemek için WordPress eklentileri.

Sosyal Medya Flying İkonları dikkate alın | Web sitenize ayarlanmış simge eklerken size çok zaman kazandıran Accurax tarafından sunulan Yüzen Sosyal Medya Simgesi eklentisi kullanın.

Bu makalenin sizin için yararlı olduğunu umuyoruz ve sosyal simgeleri eklemenin farklı yolları hakkında yorumlarınızı bırakmaktan çekinmeyin!

NOT. Sadece tasarım stüdyosu şablonlarını doğru yerde alacağınızdan emin olun.