Как я могу увеличить глифы? (Изменить размер?)

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на div.

— Aibrean

7

чтобы увеличить размер глифика «по требованию», используйте .glyphicon.larger {font-size: 150%; }

— user216661

Как насчет того, чтобы сделать его тоньше?

— Нофел

Мне пришлось добавить !important;к размеру шрифта, чтобы переопределить boostrap 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,5em.

— Майк Таверн

Гораздо лучше, чем принятый ответ и показывает общее решение повторяющейся проблемы.

— Адам

71

Если вы используете bootstrap и font-awesome, то это легко, не нужно писать ни единой строки нового кода, просто добавьте 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 объединяют усилия!

— Тимо

Я не сторонник объединения FA и Glyphicons. Ниже приведен ответ о том, как увеличить размер глифика с помощью встроенного стиля или с помощью класса CSS выше. Или для чистого решения FA используйте -> fa fa-globe fa-2x (v4.x)

— MarcoZen

MarcoZen: в любом случае при следующей версии начальной загрузки 4 Глификоны будут удалены, многие из нас раньше использовали вместе.

— Али Адрави

17

Да, и в принципе вы также можете использовать встроенный стиль:

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

— Терье Солем
источник

11

попробуйте использовать заголовок, не нужно дополнительных CSS

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

— Bagus Cahyono
источник

2

Вы можете сделать это, но это не дает вам хороший уровень контроля, как немного CSS.

— MattD

6

Использование заголовков из-за их влияния на размер шрифта является анти-паттерном. Пользователь, перемещающийся по сайту с клавиатуры, будет отправлен прямо на ваш значок, так как программа чтения с экрана предполагает, что он обозначает заголовок / заголовок для наиболее важного содержимого на странице.

— Рой

9

Например, добавить класс:

БТН-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>

Ссылка Bootstrap: Glyphicons Bootstrap

— OpenWebWar
источник

7

Вопрос рассматривал изображения, а не изображения как кнопки.

— user216661

0

Для этого я использовал классы заголовков начальной загрузки ("h1", "h2" и т. Д.). Таким образом, вы получаете все преимущества стиля без использования фактических тегов. Вот пример:

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

— Алекс Козлов
источник