Glifonları Nasıl Daha Büyük Yaparım? (Boyutu değiştir?)

239

Sayfanın büyük bir bölümünü kaplayacak şekilde dünya glificon'u büyütmek istiyorum (bu bir vektör görüntüsüdür). Bir düğmede falan değil; sadece yalnız. Bunu yapmanın bir yolu var mı?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>

— CoderBryan
kaynak

Büyük Gliflerin

— Kevin Workman

367

glyphiconTüm simgeler boyutunu artırmak için yazı tipi boyutunu büyütün.

.glyphicon {
    font-size: 50px;
}

Yalnızca bir simgeyi hedeflemek için,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

— VenomVendor
kaynak

2

İşe yaradı! (5 dakika içinde kabul edeceğim (kalan süre)) Ortalamanın bir yolu var mı? @VenomVendor

— CoderBryan

2

text-centerdiv.

— Aibrean

7

glifikonu "talep üzerine" daha büyük hale getirmek için .glyphicon.larger {font-size: 150%; }

— user216661

İnceltmeye ne dersiniz?

— Nofel

Ben !important;boostrap CSS geçersiz kılmak için yazı tipi boyutunu eklemek zorunda kaldı .

— MeanwhileInHell

143

Fontawesome'in buna mükemmel bir çözümü var.

Ben de aynısını uyguladım. sadece ana .css dosyanıza ekleyin

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

Örneğinizde bunu yapmanız yeterlidir.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>

— MR Crowley
kaynak

Güzel! 1.5em gibi kesirli miktarlar da kullanabilirsiniz.

— Mike Taverne

Kabul edilen cevaptan çok daha iyi ve tekrar eden bir soruna genel bir çözüm gösterir.

— Adam

71

Bootstrap ve font-awesome kullanıyorsanız, o zaman kolaydır, tek bir yeni kod satırı yazmaya gerek yoktur, sadece fa-Nx'i ekleyin, istediğiniz kadar büyük, Demoya bakın

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

— Ali Adravi
kaynak

Glificons ve Font-Awesome güçlerini birleştiriyor!

— Timo

FA ve Glificons'u birleştirmekten yanayım. Satır içi stilini kullanarak veya yukarıdaki bir css sınıfı aracılığıyla glifikonun nasıl yükseltileceği ile ilgili aşağıdaki cevaba bakınız. Ya da saf bir FA çözümü için -> fa fa-globe fa-2x (

— v4.x

MarcoZen: neyse bootstrap 4'ün sonraki sürümünde Glifonlar kaldırılacak, daha önce birçoğumuz birlikte kullanıyorduk.

— Ali Adravi

17

Evet ve temel olarak satır içi stilini de kullanabilirsiniz:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

— Terje Solem
kaynak

11

başlığı kullanmaya çalışın, ekstra css gerekmez

<h1 class="glyphicon glyphicon-plus"></h1>

— Bagus Cahyono
kaynak

2

Bunu yapabilirsiniz, ancak size biraz CSS'nin yaptığı gibi iyi bir kontrol düzeyi sağlamaz.

— MattD

6

Yazı tipi boyutu üzerindeki etkileri nedeniyle üstbilgilerin kullanılması bir anti-desendir. Sitenizde klavye ile dolaşan bir kullanıcı, ekran okuyucusunun sayfadaki en önemli içerik için bir başlık / başlık anlamına geldiğini varsaydığı için doğrudan simgenize gönderilir.

— Roy

9

Örneğin, sınıf ekleyin:

btn-lg - BÜYÜK

btn-sm - KÜÇÜK

btn-xs - Çok küçük

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>

Ref link Bootstrap: Glifikos Bootstrap

— OpenWebWar
kaynak

7

Soru, görüntüleri düğmeler olarak değil, görüntüleri dikkate aldı.

— user216661

0

Bunun için bootstrap başlık sınıflarını ("h1", "h2" vb.) Kullandım. Bu şekilde, gerçek etiketleri kullanmadan tüm stil avantajlarından yararlanabilirsiniz. İşte bir örnek:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

— Alex Kozlov
kaynak