Как создать кнопку с картинкой?

Question

[Mavran]

Ребята есть кнопка, и задний фон кнопки оранжевый и надо сделать так чтобы рядом с кнопкой была картинка "+" но что-то у меня не получается и так и сяк пробовал. Искал в интернете не нашел подходящих вариантов!
jsfiddle.net/au5umnjo

PS Прошу прощения за очень легкий вопрос.

Answer 1

[Хангелды Илебаев]

.button-class:after {
   content: ' ';  //  Сюда мнемонику плюс можно поставить если хочешь
   position: absolute ; // У кнопки position : relative ; нужно поставить
   top: 50%;
   left: 10px;
   bottom: auto;
   right: auto;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   background: url('../img/plus.png') no-repeat ; 
   width: 10px;
   height: 10px;

Answer 2

[IceJOKER]

jsfiddle.net/au5umnjo/1 ??
Сложно просто плюсик поставить перед ADD A BOOK ?
А если нужно шрифт увеличить, то просто соедините два блока, один как левый с плюсиком и второй рядом с текстом и изменяйте размеры.
и вроде можно без фона обойтись, думаю с монотонным цветом справится background-color: #......;

Comments

[Mavran]

Мне надо чтобы это кнопка была кликабельной

[IceJOKER]

Mavran: да разные способы есть, кто вам мешает этот плюсик нарисовать? тогда хотя бы background-image будет иметь смысл. можно с помощью JS. или одну сплошную картинку и потом

Answer 3

[Pavel]

кнопка? Пусть кнопкой будет блок div, в котором картинка img и текст. Сделайте стилизацию float: left; display: inline. И просто вешайте onclick событие

Comments

[Mavran]

Это уже сложно, не вариант ли сделай аналогичный вариант

[Anton Filippov]

Mavran: веб-разработка это вам не тяп-ляп

[Pavel]

Mavran: мой вариант такой jsfiddle.net/au5umnjo/11

Answer 4

[Евгений Перин]

Варианты:
1) background-image
2) fontawesome.io или другой иконочный шрифт
3) img + float:left (вариаций много)
4) Одной картинкой
......

Answer 5

[InSource]

Как вариант jsfiddle.net/au5umnjo/12 ( замечу, т.к. иконки в общем случае могут отличаться от данной - размером 13х13 - имеет смысл добавить ещё background-size: Npx; ).
Или можно подсмотреть в Bootstrap реализацию (см. под иконками getbootstrap.com/2.3.2/base-css.html#icons)