Как выровнять иконку и текст css
Перейти к содержимому

Как выровнять иконку и текст css

  • автор:

Как выровнять текст и иконку по центру?

введите сюда описание изображения

Как выровнять текст и иконку по центру,чтобы они были на одном уровне ? На данный момент текст находится у нижней части иконки.

.responsive__offer-icon < display: inline-block; >.responsive__offer-text < font-family: 'Roboto', sans-serif; font-size: 14px; color: #83a7a5; display: inline-block; >.fa-check-circle

 

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Как выровнить иконку по центру текста?

Как выровнить иконку по центру текста?
edb289a7033a4d6ea997222b25bbc55e.png
Пример того, что требуется ниже:
906d71977b5541d7a6d6d0e7fc4ae0f0.jpg
Подскажите, пожалуйста! Заранее спасибо 🙂

  • Вопрос задан более трёх лет назад
  • 6847 просмотров

5 советов по грамотному использованию иконок в интерфейсе

Обложка поста 5 советов по грамотному использованию иконок в интерфейсе

Иконки. Они популярны. Они помогают дополнять контент (в большинстве случаев). Тем не менее, они могут доставить немало сложностей.

Даже после того, как вы определились с форматом (SVG или иконочный шрифт?) и создали нужный набор, могут возникнуть определённые вопросы.

Вот прекрасный пример:

@chriscoyier #smashingconf any recommendations on how to align #svg icons to text?— Andreas Sahle (@pixelmord) October 20, 2015

Хитро, правда? Выравнивание иконок может быть довольно сложной задачей, особенно если иконки сделаны несколькими людьми. Признаться честно, я думал, что вопрос настолько легкий, что на него можно ответить одним твитом. Однако для идеального выравнивая иконок в тексте придется постараться.

К нашему счастью, есть пара универсальных советов, соблюдая которые, мы всегда будем знать, что наши иконки выровнены идеально.

1. Определитесь с форматом иконок

Есть и другие способы создания иконок помимо SVG, и многие из них уже устарели. Вот основные способы:

  • SVG-иконки;
  • шрифты-иконки;
  • CSS-спрайты;
  • inline-изображения.

Вне зависимости от ваших предпочтений, выравнивание иконок сильно зависит от выбранного формата. Допустим, все ваши иконки занесены в один спрайт. Значит, у иконок фиксированный размер (если, конечно, вы не сделали их большими с целью дальнейшего уменьшения при помощи background-size ). В таком случае намного проще подобрать размер и line-height текста для выравнивания с иконками.

Преимущество SVG в том, что он масштабируемый, и вы уделяете больше времени CSS, а не дизайну.

Вывод: выберите один формат для всех иконок и на его основе стройте свой способ выравнивания. Код в таком случае будет намного проще, а ваш дизайнер (или ваш внутренний дизайнер) скажет вам спасибо.

2. Используйте иконки одинакового размера

Рассмотрим идеальную ситуацию: все иконки квадратные и одного размера, 100х100. Мы знаем размеры иконок, что существенно упрощает процесс выравнивания.

Мы также знаем, что так бывает далеко не всегда. Иконки могут занимать различное пространство.

5 советов по грамотному использованию иконок в интерфейсе 1

Иконка карты уже иконки аватара, а та, в свою очередь, уже иконки корзины. Да, вы можете обрезать все пустое пространство вокруг иконок для экономии размера файла, но вы получите иконки разных размеров. Если мы работаем с SVG, это не проблема. А вот для растровой графики типа PNG такой расклад нежелателен. В SVG мы можем задать определенное пространство, которое будет занимать иконка без потери разрешения, а вот растровая графика будет растягиваться и искажаться, если не соблюдать разрешение.

Тут можно подогнать условия, в которых создаются иконки, к используемому формату. Если вы используете SVG, то сама иконка может быть любого размера, но постарайтесь не трогать размеры холста в Illustrator’е (или любом другом графическом редакторе). Так вы сможете в будущем масштабировать иконки.

При работе с растровой графикой всегда соблюдайте разрешения. Иконки могут занимать разное пространство, но главное убедиться, что ваши иконки четкие и пропорциональные.

3. Размер шрифта должен подходить к размеру иконок

Иконки в большей своей части обрабатываются, как шрифты. Они используются вместе с текстом или вместо него, поэтому крайне важно подбирать размер иконок под размер текста по той же самой причине, что и использовать буквы одного размера — это влияет на разборчивость текста.

Это не значит, что иконки обязательно должны быть размера 16px, если размер шрифта текста равен 16px. Важно понимать, что ваши иконки отлично дополняют текст, будь они чуть больше, одного размера или чуть меньше основного текста. Наглядная иллюстрация хорошо выравненных иконок и плохо выравненных иконок.

Несмотря на одинаковое выравнивание в обоих примерах, слева иконки намного лучше подходят под размер текста и лучше выравнены, чем справа.

4. Точно настраивайте внешний вид с помощью CSS

Есть один точный и простой способ выравнивания иконок в тексте:

.icon < position: relative; /* Adjust these values accordingly */ top: 5px; left: 5px; > 

В демке ниже заметна разница между идеально выравненными иконками и текстом и иконками, которые выравнены чуть хуже.

5. Используйте классы для отдельных иконок

Пример выше неплох, но вы могли заметить, что иконка местоположения уже других и расположена дальше от текста, чем иконка музыки. Это так раздражает! Тут нас выручит CSS, написанный специально под эту иконку.

    Weezer Santa Monica Discography weezer.com Artist Store
/* Match any class name that starts with icon */ [class^="icon"] < width: 50px; height: 50px; position: relative; top: 15px; margin-right: 10px; fill: #fff; >/* Reposition the music note icon */ .icon-music

Так намного лучше!

Заключение

Если и это не помогло точно выровнять иконки и текст, то вы не одиноки. Тут все сильно зависит от того, как вы создавали иконки. CSS – довольно простой способ.

В этой статье описан только способ выравнивания иконок внутри текста, но есть много других элементов, таких как кнопки, поля формы, меню и т.д. А еще есть адаптивный дизайн, так ведь?! Несмотря на то, что нужно сделать, предложенные пять советов помогут справиться с задачей.

Как выровнять текст и иконку к нему в Bootstrap?

Author24 — интернет-сервис помощи студентам

Как выровнять меню по центру, bootstrap 3
Всем привет. Возникла такая ситуация: добавил меню через .navbar-nav, в стилях добавил выравнивание.

Как в bootstrap выровнять картинку по центру экрана?
как в bootstrap выровнять картинку по центру экрана?

Как выровнять текст?
Как выровнять label по середине формы, не в центре, а на любой другой высоте, но чтобы по бокам у.

Выровнять иконки по вертикали от контейнера, Bootstrap
На данный момент есть такая страница Как видно, иконки в панели расположены чуть выше центра.

1728 / 890 / 366
Регистрация: 26.11.2014
Сообщений: 1,824
Записей в блоге: 1

Лучший ответ

Сообщение было отмечено forlife как решение

Решение

1 2 3 4 5 6
a href="#"> ="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16"> ="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/> /svg> Поиск /a>
1 2 3 4
svg { position: relative; bottom: 2px; }

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *