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>

— CoderBryan
źródło

Możliwy duplikat Większych Glifikonów

— Kevin Workman

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