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

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

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

Ответы

Ответ 1

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

.glyphicon {
    font-size: 50px;
}

Чтобы настроить только один значок,

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

Ответ 2

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>

Ответ 3

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

Ответ 4

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

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

Ответ 5

Для ex.. добавить класс:

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>

Ссылка на ссылку Bootstrap: Glyphicons Bootstrap

Ответ 6

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

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

Ответ 7

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

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