Хитро, правда? Вирівнювання іконок може бути досить складним завданням, особливо якщо іконки зроблені декількома людьми. Зізнатися чесно, я думав, що питання настільки легкий, що на нього можна відповісти одним твітів. Однак для ідеального вирівнюючи іконок в тексті доведеться постаратися.
На наше щастя, є пара універсальних порад, дотримуючись яких, ми завжди будемо знати, що наші іконки вирівняні ідеально.
Рада 1: Визначтеся з форматом іконок
Є й інші формати іконок крім SVG. Є безліч методів, які вже застаріли. Пара прикладів форматів іконок: SVG іконки, шрифти-іконки, CSS спрайт, Інлайновие зображення.
Незалежно від ваших уподобань вирівнювання іконок сильно залежить від обраного формату. Наприклад, всі ваші іконки занесені в один спрайт. Значить, у іконок фіксований розмір (якщо звичайно ви не зробили спочатку найбільші іконки, а потім за допомогою background-size зменшуєте їх). В такому випадку набагато простіше підібрати розмір і line-height тексту для вирівнювання з іконками.
Практика HTML5 та CSS3 з нуля до результату!
Перевага SVG в тому, що він масштабується, і ви більше часу приділяєте CSS, а не дизайну.
Висновок: виберіть один формат для всіх іконок і на його основі будуйте свій спосіб вирівнювання. Код в такому випадку буде набагато простіше, а ваш дизайнер (або ваш внутрішній дизайнер) скаже вам спасибі.
Рада 2: Використовуйте іконки одного розміру
Ідеальна ситуація, коли всі іконки одного розміру. Скажімо, всі ваші іконки за розмірами 100х100px. Ми знаємо розміри іконок, що істотно спрощує процес вирівнювання.
Ми також знаємо, що так буває далеко не завжди. Іконки можуть займати різне простір.
При роботі з растровою графікою завжди дотримуйтесь дозволу. Іконки можуть займати різний простір, але головне переконатися, що ваші іконки чіткі і пропорційні.
Рада 3: Підбирайте font-size під розмір іконок
Іконки в більшій своїй частині обробляються, як шрифти. Вони використовуються на пару з текстом або замість нього, тому вкрай важливо підбирати розмір іконок під розмір тексту по тій же самій причині, що і використовувати букви одного розміру - це впливає на розбірливість тексту.
Практика HTML5 та CSS3 з нуля до результату!
Це не означає, що іконки повинні бути обов'язково 16px, якщо у вас шрифт тексту дорівнює 16px. Важливо розуміти, що ваші іконки відмінно доповнюють текст, будь вони трохи більше, одного розміру або трохи менше основного тексту. Наочна ілюстрація добре вирівняні іконок і погано вирівняних іконок.
Незважаючи на однакове вирівнювання в обох прикладах, зліва іконки набагато краще підходять під розмір тексту і краще вирівняні, ніж справа.
Рада 4: Точно налаштовуйте зовнішній вигляд за допомогою CSS
Після всього сказаного і зробленого є один точний і простий спосіб з вирівнювання іконок в тексті:
Нижче в демо помітна різниця між ідеально вирівнюються іконками і текстом і іконками, які вирівняні трохи гірше.
Рада 5: Використовуйте класи для окремих іконок
Приклад вище непоганий, але ви могли помітити, що іконка розташування вже інших і розташована далі від тексту, ніж іконка музики. Це так дратує! Тут нас виручить CSS, написаний спеціально під цю іконку.
Так набагато краще!
висновок
Якщо і це не допомогло точно вирівняти іконки і текст, то ви не самотні. Тут все сильно залежить від того, як ви створювали іконки. CSS - досить простий спосіб.
У цій статті описаний тільки спосіб вирівнювання іконок всередині тексту, але є багато інших елементів, таких як кнопки, поля форми, меню і т.д. А ще є адаптивний дизайн, але ж. Незважаючи на те, що потрібно зробити, мені здається, запропоновані мною п'ять порад допоможуть впоратися з завданням.
Редакція: Команда webformyself.
Практика HTML5 та CSS3 з нуля до результату!
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
