Büyük Glifonlar

212

Twitter bootstrap 3.0'da (2.3.x değil) daha büyük Glificons nasıl yaparım.

Bu kod glifonlarımı büyük hale getirecek:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

Nasıl bu boyutu alabilirsiniz olmadan kullanırken btn-lg sınıfını kullanarak sadece bir yayılma?

Bu küçük bir glifik verir:

<span class="glyphicon glyphicon-link"></span>

— guiomie
kaynak

372

Glifikona istediğiniz gibi bir yazı tipi boyutu verebilirsiniz:

span.glyphicon-link {
    font-size: 1.2em;
}

harika! Benim durumumda, bir düğme ile bir giriş grubu-btn vardı ve bu düğme biraz daha büyüktü. Bu yüzden glifikonum için "font-size: 95%" yazdım ve çözüldü.

— victorf

41

İşte nasıl yaparım:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Bu, hareket halindeyken boyutu değiştirmenizi sağlar. Özel gereksinimlerin css'yi değiştirmek ve herkes için geçerli olmasını sağlamak yerine boyutu değiştirmesi için en iyi sonucu verir.

— Randy Greencorn
kaynak

2

Genelde satır içi stiller iyi bir yaklaşım değildir. Bazı bileşenler için belirli stillere ihtiyacınız varsa, yeni yazı tipi boyutunu ana sınıfı aracılığıyla uygulayın

— Kaloyan Stamatov

bazen bir defadır ve yine de rahatsız edilemez

— Matthew Lock

29

.btn-lgSınıf Bootstrap 3 (aşağıdaki CSS içeriyor bağlantı ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Aynı font-sizeve line-heightyayılma alanınıza ( bu efekti birden fazla örnekte kullanacaksanız .glyphicon-linkyeni oluşturulan .glyphicons-lg) uygularsanız, büyük düğmeyle aynı boyutta bir Glif simgesi elde edersiniz.

— Angelique
kaynak

4

btn-lgsınıf eklemek çok daha kolay bir seçenektir. İyi cevap!

— Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Snippet'i genişlet

— barış çıracı
kaynak

2

Benim durumumda, input-group-btna ile bir vardı buttonve bu buttononun kabından biraz daha büyüktü. Böylece sadece font-size:95%glifikonumu verdim ve çözüldü.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

— victorf
kaynak

2

Senin yazın in <h1>veya <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— sessiz
kaynak

0

Bootstrap 3 kullanıyorsanız, böyle kullanın . Bootstrap 3 için mükemmel çalışır . Boyutu daha küçük ayarlamak için
birden fazla etiket bile kullanabilirsiniz .
Kod:


— Valynk
kaynak

Bu sorunun tam tersidir ... stilleri geçersiz kılmadığınız sürece bu onu küçük yapacaktır. Geçen gün tam olarak bu etiketi kullandım.

— Richard Barker