Добавление отступов между изображением и текстом

Question

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

Я чувствую, что название слишком близко к знаку плюса, поэтому как добавить добавку между знаками плюс и заголовком? У меня уже есть дополнение для названия, поэтому я не уверен, что делать.

Это можно увидеть на моем сайте:

http://realtorcatch.com/service

код у меня есть для этого:

.service_wrapper { 
    border: 1px solid black; 
    margin: 15px; 
    width: 20%; 
} 
.service_list { 
    margin-left: 20%; 
} 
.service_title { 
    padding: 15px 12px; 
    margin: 0; 
    font-weight: bold; 
    font-size: 1em; 
} 
.service_title:hover { 
    background-color: gray; 
    color: blue; 
    cursor: pointer; 
} 
.service_description { 
    display: none; 
    padding: 8px 14px; 
    width: 100%; 
    margin-top: 10px; 
    font-size: .9em; 
} 

<div class="service_list"> 
    <div class="service_wrapper"> 
     <div class="service_title"><img src="icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div> 
    <div class="service_description">The best floors!</div> 
</div> 

Answer 1

отдавания обивка прямо в изображение, как показано ниже и использование минус (-), знак при скольжении и плюс (+) соответственно.

.service_title img { 
padding-right:10px; 
} 

jsfiddle ссылка chick here