Умело, нали? Изравняване на икони може да бъде доста трудна задача, особено ако иконите са дело на няколко души. Честно казано, аз мислех, че въпросът е толкова лесно, че това може да се отговори на един туит. Въпреки това, за перфектна вечер на икони в текста ще трябва да се опита.
За наше щастие, има няколко универсални съвети, като отбелязва, че ние винаги знаем какво ни икони са изравнени перфектно.
Съвет 1: Решете от формата на икони
Има и други формати в допълнение към икони SVG. Има много методи, които вече не са актуални. Няколко примера за икони формати: икони SVG, шрифтове, икони, CSS спрайтове, Inlaynovye изображение.
Независимо от предпочитанията ви приведе икони е силно зависим от избрания формат. Например, всички ваши икони са включени в един спрайт. Това означава, че икони фиксирани размери (освен ако, разбира се, че не сте в първите много големи икони, а след това да ги намалят с помощта на фон-размер). В този случай, много по-лесно да избират размера и линия-височина за иконите на текст подравняване.
HTML5 и CSS3 практика от нула до резултата!
SVG предимство е, че тя може да се надгражда и да прекарате повече време с CSS, а не дизайн.
Заключение: изберете един формат за всички икони и на тази основа се изгради своя път към изравняване. Кодът в този случай ще бъде много по-лесно и по вашия дизайнер (или вътрешната си дизайнер), ще ти благодаря.
Съвет 2: Използване на същите икони размер
Идеалната ситуация е, когато всички икони с еднакъв размер. Например, всички ваши икони на 100h100px размер. Ние знаем размера на иконите, което значително опростява процеса на привеждане в съответствие.
Ние също така знаем, че това не винаги е така. Икони могат да заемат различни пространства.
При работа с растерни графики, винаги се вслуша в резолюцията. Икони могат да заемат различни места, но по-важното е да се уверите, иконите са ясни и пропорционални.
Съвет 3: Изберете размер на шрифта икона
Икони за по-голямата част се третира като шрифтове. Те се използват за двойка с или вместо него, така че е важно да се избере размера на иконите под размера на текста, по същата причина, че използвате букви с еднакъв размер - това се отразява на четивността на текста.
HTML5 и CSS3 практика от нула до резултата!
Това не означава, че иконите трябва да са сигурни, че 16px, ако имате шрифта на текста е 16px. Важно е да се разбере, че иконите перфектно допълват текста, независимо дали те са малко повече от един и същ размер или малко по-малък от основния текст. Графичен илюстрация на добре подредени икони и недобре подредени икони.
Въпреки същата регулировка и в двата случая, иконата в ляво е много по-подходящ за размера на текста и по-добре подравнен от дясно.
Съвет 4: фина настройка на външния вид с CSS
След като всичко е казано и направено, има точен и лесен начин за изравняване на иконите в текста:
На следващата демо-забележимата разлика между перфектно подравнени икони и текст и икони, които са малко по-малко изравнени.
Съвет 5: Използвайте класове за отделните икони
В примера по-горе, не е лошо, но може да забележите, че на мястото на иконата има друга и се намира по-далеч от текста от иконата на музика. Това е толкова досадно! Тук ще спаси CSS, написана специално за тази икона.
Така че много по-добре!
заключение
Ако това не помогне точно да се приведе в съответствие икони и текст, не сте сами. Всичко зависи от това как сте създали иконите. CSS - сравнително прост начин.
Тази статия описва само как да се оправдае иконите вътре в текста, но има и много други елементи, като например бутони, полета на формуляра, менюта и др И тогава там са най-адаптивен дизайн, не е това. Въпреки факта, че трябва да направите, струва ми се, ми предложиха пет съвети ще ви помогнат да се справи с тази задача.
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!