我的图片没有显示

Question

我希望在我的＆＃34; Skriv ut＆＃34;左侧显示一个图标。文字，但由于某种原因，它没有显示。

我想这样：

这是我的代码：

<div class="col-md-4 col-md-offset-4">
            <a href="javascript:window.print();" class="Print">Skriv ut</a>    
    </div>

CSS

.Print:link, .Print:visited {
    background: url(../img/Icon.png) 0 -320px no-repeat transparent;
    float: left;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6px;
    padding-left: 22px;
}

http://jsfiddle.net/j3jof9ex/3/

Answer 1

我做了一些改动，但它现在有效，我希望这是你想要的方式。 这是Jsfiddle。

HTML code：

node-pre-gyp

CSS代码：

<div class="col-md-4 col-md-offset-4">
  <div class="print-icon"></div>
  <a href="http://www.google.nl" target="_blank" class="Print">
    <img src="http://placehold.it/50x50">
    Skriv ut
    </a>
</div>

Answer 2

你可以这样做：

<强> CSS

.Print:link, .Print:visited {
    background: transparent url(http://placehold.it/50x50) no-repeat left center ;
    float: left;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6px;
    padding-left: 60px;
}

注意：您可以调整背景：background: transparent url(http://placehold.it/50x50) no-repeat left -10px center 20px;

<强> DEMO HERE