Как увеличить размер glyphicon в Bootstrap: пример с globe

Быстрый ответ

Для увеличения размера глифов достаточно задать значение font-size в вашем CSS. Таким образом можно удвоить размер:

.glyphicon {
    font-size: 2em;  /* "em" — удивительно удобная единица измерения для размера шрифта! */
}

Примените к вашей иконке класс .glyphicon, и она увеличится прямо на ваших глазах.

Использование различных единиц измерения

Давайте углубимся в детали. В CSS можно использовать разные единицы измерения, ведь размер действительно важен. Глифы можно масштабировать с помощью px, em, rem, pt, vw, vh, и даже... %?

.glyphicon {
    font-size: 48px;  /* Дизайнер: "Хочу эту иконку точно 48 пикселей!" */
}
/* ИЛИ */
.glyphicon {
    font-size: 3em;  /* UX-дизайнер: "Сделай это относительным размером, пользовательский опыт важен!" */
}

Создание класса в стиле Sass

Создайте свои собственные CSS классы для масштабирования, например, gi-5x. Это похоже на создание собственного Font Awesome, только с меньшим объемом кода:

.gi-5x {
    font-size: 5em;  /* Это как шпинат для Попая, только для ваших иконок */
}

Добавьте к элементу span класс gi-5x, и наслаждайтесь иконкой, увеличенной в 5 раз!

Подготовка глифов в Bootstrap

Хотите увеличивать иконки в заголовках или джамботроне? Bootstrap к вашим услугам:

<h1><span class="glyphicon glyphicon-search"></span> Поиск</h1>  /* Иконка заиграет новыми красками */

С использовании этого способа иконка наследует размер от внешнего блока. Результат вас приятно удивит.☕

Визуализация

Глифы — это фигуры, которые вы можете настроить под себя:

<span class="glyphicon glyphicon-star" style="font-size: 24px;"></span> /* Звезда стандартного размера */
<span class="glyphicon glyphicon-star" style="font-size: 48px;"></span> /* Звезда увеличенного размера */

От маленкого звездного огонька до великолепного светила — регулируйте font-size и определите, насколько велики будут ваши глифы! 📏✨

Будьте осторожны: глифы требуют тщательности

Убедитесь, что родительские элементы, например кнопки или группы ввода, не стали преградой, переопределяя изменения размера:

<button class="btn btn-default">
    <span class="glyphicon glyphicon-plus gi-5x"></span>  /* "Я уменьшил размеры, изменяться не собираюсь!" */
</button>

Проверьте, чтобы стили внешних элементов не мешали масштабированию.

Быстрее, лучше, мощнее с Font Awesome

Размышляете о переходе на Font Awesome? Они предлагают вам множество готовых классов для изменения размеров: от fa-lg до fa-2x, fa-3x и так далее.

<i class="fa fa-star fa-3x"></i>  /* "Посмотри, мама, я в три раза больше!" */

Быстрое прощание с инлайновым CSS

Нужен срочный ремонт? Подарите иконке новый размер с помощью инлайновых стилей:

<span class="glyphicon glyphicon-envelope" style="font-size: 80px;"></span> /* "Я умею работать с пикселями..." */

Это не постоянное решение, но отличная временная замена!

Полезные материалы

1. Sizing Icons | Font Awesome Docs – официальное руководство по изменению размера иконок Font Awesome.
2. Components · Bootstrap – документация по Glyphicons из Bootstrap.
3. CSS Font Size – учебный материал по определению размеров шрифтов в CSS.
4. Bootstrap 3 Glyphicons are not working – Stack Overflow – решение проблем с Glyphicons в сообществе разработчиков на Stack Overflow.
5. font-size – CSS: Cascading Style Sheets | MDN – углубите свои знания свойства font-size.
6. Using SVG | CSS-Tricks – изучите возможности SVG.
7. Rem in CSS: Understanding and Using rem Units — SitePoint – раскройте потенциал использования единицы rem в CSS.