css/less背景圖標定位左和中心

Question

您好我想創建一個類似的小規模說字體真棒在哪裏我與我自己的圖標。

我有三個圖標：

sell.png (20px x 20px) 
buy.png (20px x 20px) 
cma.png (20px x 20px) 

我的目標是有背景圖像是左和垂直對齊中間的文本。

這是我到目前爲止，但如果它工作，那麼...我不會在這裏！

<span class="amls amls-buy">buy</span> 
<span class="amls amls-sell">sell</span> 
<span class="amls amls-cma">cma</span> 

CSS：

.amls { 
    display: inline-block; 
    font-style: normal; 
    padding-left: 22px; 
    position: relative; 
    :before { 
     background-repeat: none; 
     content: ""; 
     display: block; 
     position: absolute; 
     left: 0; top: 2px; 
     height: 20px; 
     width: 20px;  
    } 
} 

.amls-buy:before { 
    background-image: url('img/buy.png') 
} 

Answer 1

可以簡化並設置你的圖標爲您跨度的背景圖像（不是：前）與background-repeat: no-repeat;和background-size: auto 100%;它適合你的跨度。保持跨度上的填充以便圖標坐在填充內。

這是JSFiddle。 :)