Neler yeni

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

Full Nvme SSD Disk Desteği Sayesinde Çok Daha Hızlı Web Siteleri! 7/24 Destek. Ücretsiz Antispam Koruma. Ücretsiz Domain. Anında Aktivasyon
Ad
ZEKİ
Soyad
AYGÜN
Katılım
18 Ocak 2019
Konum
Yalova
Konular
777
Mesajlar
2,933
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Webmaster & SEO
Detay  
Meslek
Webmaster & SEO
Tecrübe
12 Yıl
Uzmanlık alanları
Web tasarım, PHP, SEO, Seslendirme, Video montaj
İş referanslarım
youtube.com/channel/UC0EKnd0EWBefw9Wrqw_wrAA
Üyelik tipi
  1. Bireysel
Enpara   Hesap
ZEKİ AYGÜN
HESAP NO; 1237-0056746
ŞUBE: DOSAB BURSA
İBAN: TR69 0004 6012 3788 8000 0567 46
Enpara   Hesap
ZEKİ AYGÜN
HESAP NO: 497-6640783
ŞUBE: GEMLİK
İBAN: TR60 0006 2000 4970 0006 6407 83
Photoshop   Photoshop
  1. Orta düzey
    50%
İllüstratör   İllüstratör
  1. Başlangıç düzeyi
    30%
İllüstratör   UI / UX tasarım
  1. İleri düzey
    90%
PHP   PHP
  1. Orta düzey
    50%
PHP   CSS3
  1. İleri düzey
    90%
PHP   JavaScript
  1. Orta düzey
    50%
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:
Yuvarlak Kare Düz Önyükleme Sosyal Simgeler


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:
Uzun Gölgeli Daire Sosyal Simgeleri


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:
Alt Kenarlıklı Bootstrap 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:
Sosyal Metin Düğmeleri, Hap Şekilleri, Alt Gölgeler


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​


İNDİR:
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
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.