Скажите, как правильно сверстать колонки?

Question

[R3dF0X]

Если устанавливать свойство float: left , то текст обтекает изображение снизу.
Изображения лучше загружать через img src="", либо найти аналог на fontawesome или загружать как background, а потом устанавливать background-position ?
Заранее благодарен за ответ.

Answer 1

[Вадим Белкин]

Пример структуры и размещение блока изображения и текста. Способов подобного размещения много, применяйте знания CSS. Данные изображения можете сделать спрайтовыми иконками, конвертировать в шрифтовые иконки и т.п. Так же никто не запрещает вставлять их обычными img. Как удобно вам.

Answer 2

[Никита]

я бы забил на img вообще. иконки экспортируем в svg, с помощью app.fontastic.me делаем иконочный шрифт. Для блока указываем уникальный селектор, для которого псевдоэлементом :before задаем нужную нам иконку. Плюсы:
1) все ваши изображения загрузятся за один http запрос в файле иконочного шрифта
2) качество картинок не будет зависеть от размеров устройства (вообще ни от чего зависеть не будет, у нас же вектор)
3) можно удобно менять размер иконок, их цвет..
4) красивая верстка, без лишних div-ов, каких то правил и оберток.

Comments

[R3dF0X]

Расскажите пожалуйста по подробнее по поводу использования app.fontastic.me, ни как не могу найти полное описание процесса.

[Никита]

R3dF0X: после регистрации система покажет вам те иконочные шрифты, что уже в ней есть. Font-aweson и т.д. Выбираете те, что вам нужны и через publish либо скачиваете шрифт себе, либо подключаете его через link, который система сгенерирует для вашей системы. Если хотите свои иконки, то подготавливаете svg для каждой из них. svg должно быть БЕЗ фона. Сверху ссылка Add more icons, туда их грузите. А дальше как и с опубликованными шрифтами работаете

[R3dF0X]

Скажите а как лучше тогда позиционировать эту иконку, если мне нужно чтобы она было слева или с права, под ней пустое пространство, как на картинке.
Спасибо за совет.

Answer 3

[Михаил Радченко]

Пример с использованием свойства display без указания способа позиционирования.