Bootstrap Sosyal Simgeleri: Saf CSS Simgeleri ve Düğmeleri

Bugün size son zamanlarda oluşturduğum yeni bir Bootstrap Sosyal Simgeleri seti sunacağım ve umarım sonraki projelerinizde biraz zaman kazanmanıza yardımcı olur. Bu simgeler saf CSS'dir , resim kullanmaz ve bir sonraki Bootstrap projenize entegre edilmeye hazırdır.

Simge seti, , ve renkler, şekiller ve efektler için bazı özel bir kombinasyonudur . Birçok şekil, gradyan ve gölge türü (CSS3 özelliklerini kullanarak) zaten dahil edilmiştir ve zaman zaman yenilerini eklemeye devam edeceğim.
İhtiyaç duyarsanız, bu simgeleri CSS kodundan çok kolay bir şekilde özelleştirebilir, renkleri değiştirebilir veya yeni bir efekt ekleyebilirsiniz. Ayrıca vektör oldukları için kaliteden ödün vermeden her boyutta ölçeklenebilirler (Retina ekranlar için idealdir). Bu nedenle, bunları nasıl kullanacağınızı öğrenmek, canlı bir ön izleme görmek ve indirmek için aşağıya bir göz atın. Zevk almak!

Bootstrap Sosyal Simge Seti nasıl kullanılır​

Öncelikle aşağıdaki bağlantıdan paketi indirin, çıkartın ve projenize ekleyin.
Bootstrap CSS dosyasını projenize ekleyin . Örnek / demo dosyasına nasıl ekledim:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

Dahil Yazı Müthiş CSS dosyasını projenizde. İşte onu nasıl dahil ettim:

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

Özel CSS'yi projenize ekleyin . Bu paketin "style.css" dosyasını dahil edebilir veya dosyayı açıp kodun sadece ihtiyacınız olan kısmını kopyalayabilirsiniz. Bu şekilde projenize gereksiz kod eklemiyorsunuz.
<link rel="stylesheet" href="assets/css/style.css">

Örnek "index.html" dosyasında , metin bölümleri için kullandım :
<link rel="stylesheet" href=" ">

Tercih ettiğiniz yazı tipini projenizde kullanabilirsiniz.

Örnekte bazı farklı simge şekilleri, boyutları, gradyanları, gölgeleri ve efektleri görebilirsiniz. Simge özelliklerini kontrol etmek için bazı CSS sınıflarının bir kombinasyonunu kullandım.
Aşağıda, farklı simge efektlerini, bu efekt için kullanılan HTML kodunu ve CSS sınıflarını gösteren bazı önizleme resimlerini göreceksiniz. Bu sınıfları “style.css” dosyasından görebilir (ve onlarla oynayabilirsiniz).

Yuvarlak Kare Daire​

Yuvarlatılmış kare düz sosyal simgeler, 48 x 48 piksel:


Simgeler HTML kodu:
<a href="#" class="btn azm-social azm-size-48 azm-r-square azm-android"><i class="fa fa-android"></i></a>

Çember Uzun Gölge​

Uzun gölgeli sosyal simgeleri daire içine alın, 64 x 64 piksel:


Simgeler HTML kodu:
<a href="#" class="btn azm-social azm-size-64 azm-circle azm-long-shadow azm-dribbble"><i class="fa fa-dribbble"></i></a>

Metin Düğmeleri, Kenarlık Alt​

Alt kenarlı sosyal metin düğmeleri:


Simgeler HTML kodu:
<a href="#" class="btn azm-social azm-btn azm-border-bottom azm-facebook"><i class="fa fa-facebook"></i> Log in with Facebook</a>

Metin Düğmeleri, Hap Şekli, Alt Gölge​

Hap / kapsül şekilleri ve alt gölgeleri olan sosyal metin düğmeleri:


Simgeler HTML kodu:
<a href="#" class="btn azm-social azm-btn azm-pill azm-shadow-bottom azm-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter</a>

Demo, İndirme ve Lisans​

İçeriği görebilmek için üye olunuz

İNDİR:

İçeriği görebilmek için üye olunuz

LİSANS:
Bu sosyal simgeleri ve düğmeleri kişisel ve ticari projelerde kullanabilirsiniz, ancak lütfen bunları kendi başınıza doğrudan satmayın veya dağıtmayın. Bunları kullanmayı planlıyorsanız, bu sayfaya bir bağlantı veya kelimeyi yaymanın herhangi bir şekli çok takdir edilecektir.

DAHİL OLAN SİMGELER:
Android, Apple, Behance, Bitcoin, BuySellAds, CodePen, CCS3, Delicious, DeviantArt, Digg, Dribbble, Dropbox, Drupal, E-posta 1, E-posta 2, Facebook, Flickr, Foursquare, Git, GitHub, Google, Google Plus, HTML5, Instagram , Joomla, JSFiddle, Last.fm, LinkedIn, Linux, MaxCDN, Medium, PageLines, PayPal, Pinterest, Reddit, RSS, Share, Skype, SlideShare, SoundCloud, Spotify, Stack Exchange, Stack Overflow, StumbleUpon, Trello, Tumblr, Twitter , Vimeo, Vine, VK, WhatsApp, Windows, WordPress, XING, Yahoo, Yelp, YouTube, YouTube Play.

Sonuç​

Bu kadar. Burada , size biraz zaman kazandıracak, tüm modern tarayıcılarla uyumlu, kullanıma hazır, saf CSS3, Bootstrap için güzel bir Sosyal Simgeler ve Düğmeler setine sahipsiniz.

ALINTI