it-swarm.com.ru

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

Я хотел бы сделать глобус-глификон больше, чтобы он занимал большую часть страницы (это векторное изображение). Это не кнопка или что-нибудь; это просто один. Есть ли способ сделать это?

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

Увеличьте размер шрифта glyphicon, чтобы увеличить размер всех значков.

.glyphicon {
    font-size: 50px;
}

Чтобы нацелить только один значок, 

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

У 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>  
136
Mr. Crowley

Если вы используете 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>
64
Ali Adravi

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

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

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

<h1 class="glyphicon glyphicon-plus"></h1>
11
Bagus Cahyono

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

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> 

Ссылка Bootstrap: Glyphicons Bootstrap

9
OpenWebWar

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

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

0
Alex Kozlov