Від автора: іконки зараз дуже популярні, вони доповнюють контент (в більшості випадків). Але з іншого боку вони можуть доставити чимало клопоту. Якщо ви визначилися з форматом (SVG або шрифти-іконки?) і створили самі іконки, все одно по мірі розробки будуть спливати різні моменти. Хороше питання, який часто приходить на думку, коли починаєш розмірковувати про іконках: є поради, як можна вирівняти svg іконки в тексті?
Хитро, правда? Вирівнювання іконок може бути досить складним завданням, особливо якщо іконки зроблені декількома людьми. Зізнатися чесно, я думав, що питання настільки легкий, що на нього можна відповісти одним твітом. Однак для ідеального вирівнювання іконок у тексті доведеться постаратися.
На наше щастя, є кілька універсальних порад, дотримуючись яких, ми завжди будемо знати, що наші іконки ідеально вирівняні.
Порада 1: Визначтеся з форматом іконок
Є і інші формати іконок крім SVG. Є безліч методів, які вже застаріли. Пара прикладів форматів іконок: SVG іконки, Шрифти, іконки, CSS спрайт, Инлайновые зображення.
Незалежно від ваших уподобань вирівнювання іконок сильно залежить від обраного формату. Наприклад, всі ваші іконки занесені в один спрайт. Значить, у іконок фіксований розмір (якщо звичайно ви не зробили спочатку найбільш великі іконки, а потім за допомогою background-size зменшуєте їх). В такому разі набагато простіше підібрати розмір і line-height тексту для вирівнювання з іконками.
Перевага SVG у тому, що він масштабований, і ви більше часу приділяєте CSS, а не дизайну.
Висновок: виберіть один формат для всіх іконок і на його основі будуйте свій спосіб вирівнювання. Код в такому випадку буде набагато простіше, а ваш дизайнер (або ваш внутрішній дизайнер) скаже вам спасибі.
Порада 2: Використовуйте іконки одного розміру
Ідеальна ситуація, коли всі іконки одного розміру. Скажімо, всі ваші іконки за розмірами 100х100рх. Ми знаємо розміри іконок, що істотно спрощує процес вирівнювання.
Ми також знаємо, що так буває далеко не завжди. Іконки можуть займати різне простір.
Іконка землі вже іконки аватара, а та в свою чергу вже іконки кошика. Якщо ви схожі на мене, то ви одріжете всі порожній простір навколо іконок для економії розміру файлу. Добре, але тепер у нас іконки різних розмірів. Якщо ми працюємо з SVG, це не проблема. А ось для растрової графіки типу PNG такий розклад небажаний. В SVG ми можемо задати певний простір, яке буде займати іконка без втрати дозволу, а ось растрова графіка буде розтягуватися і спотворюватися, якщо не дотримуватися дозвіл.
Тут можна підігнати умови, в яких створюються іконки, використовуваного формату. Якщо ви використовуєте SVG, то сама іконка може бути будь-якого розміру, але постарайтеся не чіпати розміри полотна в Illustrator’е (або будь-якому іншому графічному редакторі). Так ви зможете в майбутньому масштабувати іконки.
При роботі з растровою графікою завжди дотримуйтесь дозволу. Іконки можуть займати різне простір, але головне переконатися, що ваші іконки чіткі і пропорційні.
Порада 3: Підбирайте font-size під розмір іконок
Іконки в більшій своїй частині обробляються, як шрифти. Вони використовуються на пару з текстом або замість нього, тому вкрай важливо підбирати розмір іконок під розмір тексту з тієї ж самої причини, що і використовувати букви одного розміру – це впливає на розбірливість тексту.
Це не означає, що іконки повинні бути обов’язково 16px, якщо у вас шрифт тексту дорівнює 16px. Важливо розуміти, що ваші іконки відмінно доповнюють текст, будь вони трохи більше, одного розміру або трохи менше основного тексту. Наочна ілюстрація добре выравненных іконок і погано выравненных іконок.
Незважаючи на однакову вирівнювання в обох прикладах, зліва іконки набагато краще підходять під розмір тексту й краще вирівняні, ніж справа.
Порада 4: Точно настроювати зовнішній вигляд за допомогою CSS
Після всього сказаного і зробленого є один точний і простий спосіб по вирівнюванню іконок у тексті:
.icon {
position: relative;
/* змінити ці значення */
top: 5px;
left: 5px;
}
Нижче в демо помітна різниця між ідеально вирівняністю іконками і текстом і іконками, які вирівняні трохи гірше.
Порада 5: Використовуйте класи для окремих іконок
Приклад вище непоганий, але ви могли помітити, що іконка розташування вже інших і розташована далі від тексту, ніж іконка музики. Це так дратує! Тут нас виручить CSS, написаний спеціально під цю іконку.
- Weezer
- Santa Monica
- Discography
- weezer.com
- Artist Store
/* Стилям підходять будь-які імена класів, які починаються з icon */
[class^=”icon”] {
width: 50px;
height: 50px;
position: relative;
top: 15px;
margin-right: 10px;
fill: #fff;
}
/* Зрушуємо іконку музики */
.icon-music {
right: 5px;
}
Так набагато краще!
Висновок
Якщо і це не допомогло точно вирівняти іконки і текст, то ви не самотні. Тут все сильно залежить від того, як ви створювали іконки. CSS – досить простий спосіб.
У цій статті описаний лише спосіб вирівнювання іконок всередині тексту, але є багато інших елементів, таких як кнопки, поля форми, меню і т. д. А ще є адаптивний дизайн, так адже?! Незважаючи на те, що потрібно зробити, мені здається, запропоновані мною п’ять порад допоможуть впоратися із завданням.
