How to replace home link anchor text with image

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; /* <-------- */
}