How to replace home link anchor text with image

Question

I'm trying to replace home link text with an image for breadcrumb trailer. Mouse cursor is still pointer but image doesn't appear. I'm using this breadcrumb trailer

How could I this working please jsfiddle

<li itemprop="itemListElement" itemscope itemtype="" class="trail-item trail-begin">
<a href="#" rel="home" itemprop="item"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1" />
</li>

CSS:

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
}

Answer 1

Your question is much more like a CSS question. The anchor a by default is display as inline. So it doesn't have height and width unless text, image etc inside with finite dimension. To make it work, just add display:block; to the css so it expands to match the parent container.

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
    display: block; /* <-------- */
}