Как Сделать Технологии Glyphicons Больше? (Изменить Размер?)

Question

Как Сделать Технологии Glyphicons Больше? (Изменить Размер?)

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

<div class = "jumbotron">

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

</div>

601 7

html css twitter-bootstrap glyphicons

7 ответов:

Comments

Ничего не найдено.

VenomVendor · Accepted Answer · 2014-07-25 20:02:05

увеличить размер шрифта glyphicon чтобы увеличить размер всех иконок.
.glyphicon {
    font-size: 50px;
}
выбрать только один значок,
.glyphicon.glyphicon-globe {
    font-size: 75px;
}

Mr. Crowley · Accepted Answer · 2014-11-26 22:14:06

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>  

Ali Adravi · Accepted Answer · 2015-09-04 19:14:54

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

Bagus Cahyono · Accepted Answer · 2015-04-22 16:29:03

попробуйте использовать заголовок, не нужно дополнительных css
<h1 class="glyphicon glyphicon-plus"></h1>

Terje Solem · Accepted Answer · 2017-10-11 18:06:54

да, и в принципе вы также можете использовать встроенный стиль:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

OpenWebWar · Accepted Answer · 2016-01-28 07:00:44

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

btn-lg-LARGE

btn-sm-SMALL

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

Alex Kozlov · Accepted Answer · 2017-08-06 04:05:42

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

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