Jak zwiększyć glifikony? (Zmień rozmiar?)

239

Chciałbym powiększyć globus glifikonu, aby zakrył dużą część strony (jest to obraz wektorowy). Nie ma go w żadnym przycisku; to jest po prostu sam. Czy jest na to sposób?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
html css twitter-bootstrap glyphicons CoderBryan
źródło
Możliwy duplikat Większych Glifikonów
Kevin Workman

Odpowiedzi:

367

Zwiększ rozmiar czcionki, glyphiconaby zwiększyć rozmiar wszystkich ikon.

.glyphicon {
    font-size: 50px;
}

Aby kierować reklamy tylko na jedną ikonę, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
VenomVendor
źródło
2
To się udało! (Zaakceptuję to za 5 minut (to pozostały czas)) Czy jest sposób na wyśrodkowanie tego? @VenomVendor
CoderBryan
2
text-centerna div.
Aibrean
7
aby zwiększyć glif „na żądanie”, użyj .glyphicon.larger {rozmiar czcionki: 150%; }
user216661
Co z tym, że jest cieńszy?
Nofel
Musiałem dodać !important;do rozmiaru czcionki, aby zastąpić CSS boostrap.
Tymczasem
143

Fontawesome ma na to idealne rozwiązanie.

Zaimplementowałem to samo. dodaj tylko do swojego głównego pliku .css

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

W twoim przykładzie musisz to po prostu zrobić.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
Pan Crowley
źródło
Miły! Możesz także użyć kwot ułamkowych, takich jak 1,5em.
Mike Taverne
Znacznie lepsza niż zaakceptowana odpowiedź i pokazuje ogólne rozwiązanie powtarzającego się problemu.
Adam,
71

Jeśli używasz bootstrap i niesamowitej czcionki, to jest łatwe, nie musisz pisać ani jednego wiersza nowego kodu, po prostu dodaj fa-Nx, jak chcesz, zobacz wersję demo

<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
źródło
Glyphicons i Font-Awesome łączą siły!
Timo
Nie jestem zwolennikiem łączenia FA i glifonów. Zobacz poniżej odpowiedź na temat zwiększania rozmiaru glifika za pomocą stylu wbudowanego lub za pośrednictwem klasy css powyżej. Lub dla czystego rozwiązania FA -> fa fa-globe fa-2x (v4.x)
MarcoZen
MarcoZen: zresztą w następnej wersji bootstrap 4 Glyphicony zostaną usunięte, wielu z nas wcześniej używało razem.
Ali Adravi
17

Tak, i zasadniczo możesz także użyć stylu wbudowanego: 

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
Terje Solem
źródło
11

spróbuj użyć nagłówka, nie potrzebujesz dodatkowego css

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
źródło
2
Możesz to zrobić, ale nie daje ci to wystarczającego poziomu kontroli, jak odrobina CSS.
MattD
6
Używanie nagłówków ze względu na ich wpływ na rozmiar czcionki jest anty-wzorem. Użytkownik poruszający się po witrynie za pomocą klawiatury zostanie wysłany bezpośrednio do ikony, ponieważ czytnik ekranu przyjmuje, że oznacza tytuł / nagłówek najważniejszej treści na stronie.
Roy
9

Na przykład dodaj klasę:

btn-lg - DUŻY

btn-sm - MAŁY

btn-xs - bardzo mały

<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>

Łącze referencyjne Bootstrap : Bootstrap Glyphicons

OpenWebWar
źródło
7
Pytanie dotyczyło obrazów, a nie obrazów jako przycisków.
user216661 14.04.16
0

Użyłem do tego klas nagłówków bootstrap („h1”, „h2” itp.). W ten sposób zyskujesz wszystkie zalety stylu bez używania rzeczywistych tagów. Oto przykład:

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

Alex Kozlov
źródło