Як зробити гліфікони більшими? (Змінити розмір?)

239

Я хотів би збільшити глифікон земної кулі, щоб він охоплював велику частину сторінки (це векторне зображення). Це не в кнопці чи нічого; це тільки один. Чи є спосіб це зробити?

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

— CoderBryan
джерело

Можливий дублікат більших гліфіконів

— Кевін

367

Збільшити розмір шрифту glyphiconдля збільшення розміру всіх значків.

.glyphicon {
    font-size: 50px;
}

Щоб націлити лише одну піктограму,

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

— VenomVendor
джерело

2

Це спрацювало! (Я прийму це через 5 хвилин (на той час залишився)) Чи є спосіб відцентрувати його? @VenomVendor

— CoderBryan

2

text-centerна діві.

— Aibrean

7

щоб зробити гліфікон більшим "на вимогу", використовуйте .glyphicon.larger {font-size: 150%; }

— користувач216661

А як зробити її тоншою?

— Нофель

Мені довелося додати !important;розмір шрифту, щоб змінити завантажувальний CSS.

— Тим

143

Fontawesome має ідеальне рішення для цього.

Я реалізував те саме. просто в головному файлі .css додайте це

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

У вашому прикладі ви просто повинні це зробити.

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

— Містер Кроулі
джерело

Приємно! Ви також можете використовувати дробові суми на зразок 1,5ем.

— Майк Таверн

Набагато краще, ніж прийнята відповідь і показує загальне вирішення проблеми, що повторюється.

— Адам

71

Якщо ви використовуєте завантажувальний і шрифтовий дивовижний, то це легко, не потрібно писати жодного рядка нового коду, просто додайте fa-Nx, як ви хочете, дивіться демонстрацію

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

— Алі Адраві
джерело

Glyphicons і Font-Awesome об’єднують сили!

— Тимо

Я не прихильник поєднання ФА та гліфіконів. Дивіться нижче відповідь про те, як збільшити розмір гліфікону за допомогою стилю вбудованого або за допомогою класу css вище. Або для використання чистого рішення FA -> fa fa-globe fa-2x (v4.x)

— MarcoZen

MarcoZen: так чи інакше, наступною версією завантажувальної програми 4 Glyphicons буде видалено, багато хто з нас раніше використовували разом.

— Алі Адраві

17

Так, і в основному ви також можете використовувати стиль вбудованого тексту:

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

— Terje Solem
джерело

11

спробуйте використовувати заголовок, не потрібно зайвих css

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

— Багус Кахіоно
джерело

2

Ви можете це зробити, але це не дає вам тонкого рівня контролю так, як хотів би трохи CSS.

— MattD

6

Використання заголовків через їх вплив на розмір шрифту є анти-шаблоном. Користувач, що переміщається по вашому сайту за допомогою клавіатури, буде надісланий прямо до вашого значка, оскільки читач екрана припускає, що він означає заголовок / заголовок найважливішого вмісту сторінки.

— Рой

9

Наприклад, додайте клас:

btn-lg - ВЕЛИКИЙ

btn-sm - МАЛИЙ

btn-xs - Дуже мало

<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: Glyphicons Bootstrap

— OpenWebWar
джерело

7

Питання розглядало зображення, а не зображення як кнопки.

— користувач216661

0

Я використовував для цього класи заголовків завантажувальної програми ("h1", "h2" тощо). Таким чином ви отримуєте всі переваги стилю, не використовуючи фактичні теги. Ось приклад:

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

— Олексій Козлов
джерело