Иконка и напротив нее текст

[seo-partner]

Как сделать в css, иконка и напротив нее текст? пример на картинке.

 

[DzSoft]

Как сделать в css, иконка и напротив нее текст? пример на картинке.

тут Для просмотра ссылки Войди или Зарегистрируйся

 

[alex_me]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Reserv]

Мне привычнее при помощи background-position - Для просмотра ссылки Войди или Зарегистрируйся Ещё делают при помощи псевдоэлементов Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся и свойства Для просмотра ссылки Войди или Зарегистрируйся. И вообще, кому как нравится, вариантов сделать это масса.

 

[alex_me]

Здесь акцент на адптивную верстку
Вешаешь медиаквири на ширину сниппета, он сжимается пропорционально

.snippet {
      @include breakpoint(small) {
           width: 100%;
      }      
      @include breakpoint(medum up) {
           width: 400px;
      }
}

Или ставишь 100% и он меняется под контейнер

 

[Barok]

Как сделать в css, иконка и напротив нее текст? пример на картинке.

есть по крайней мере 3 простых варианта как это сделать:
1. Самый простой, это заключить в таблицу <table> с двумя колонками
2. Расположить 2 div в одну строку, при помощи float: left
3. Использовать :before

 

[$_Maclay]

Здравствуйте, вот написал простенький код, берите если еще актуально Для просмотра ссылки Войди или Зарегистрируйся

 

[afdivi]

можно сделать списком li и выровнить по левому краю оба, тогда первый будет стоять картина и далее текст.

 

[semaby]

Как сделать в css, иконка и напротив нее текст? пример на картинке.

Самый удобный - padding-left по ширине картинки и саму картинку фоном (будет внутри паддинга).
Если надо <img/> то display: inline-block к картинке и диву с текстом.
Или img float:left внутри дива с текстом если надо обтекание.

 

[vitea777]

можно через CSS:
div:before {
content:" ";
postion:absolute;
width:200px;
height:200px;
top:0px;
left:-200px;
background:url(....) no-repeat left;
}