Icon replaced with CSS content() and ::before not shown in Firefox -

I want to change the text in the menu item with an icon through CSS. The icon should be clickable I tried it with the following code and it looks good in Safari and Chrome. Although firefox shows "home" instead of image

Does anyone know what is the solution to Firefox?

  & lt; Ul id = "menu-house" category = "menu origin-nav-menu menu-primary" & gt; & Lt; Li id = "menu-item -1951" class = "home menu-item" & gt; & Lt; A href = "home" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "menu-item-17414" class = "menu-item" & gt; & Lt; A href = "link1" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; .nav-primary ul.menu> Li a :: Before Visibility: Visible; } .nav-primary ul.menu> Li.home A: First {content: url ('images / home_icon.jpg') No-double; Status: Relative; Bottom: -2px; }  

Thanks!

Your content declares a no-repeat , Which seems to have survived the previously used background declaration, it needs to be removed:

  content: url ('images / home_icon. Jpg '); Status: Relative; Bottom: -2px; In addition, though WebKit is known for its awesome imagery infringement, it should not work in Safari and Chrome because it does not work on any other browser. There really is no reason for this - even if arbitrarily provides a way to add replaceable material with string, even if it has been implemented in chrome, here  no-repeat  token Clearly neither is a string nor a valid value for any  content , and it should not be treated like this. 
 
 In addition, if you are looking at  replaced  with an image, you probably will need to keep your image in the text position, not relatively, since it Inserts the image before the text, how you implement it, it depends on your layout, but I thought it was important to point out.