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

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>

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