FirefoxのSVG CSSコンテンツ

Question

私のWebページのCSSにSVGアイコンがあります。 ChromeとSafariで表示され、反応がありますが、Firefoxではまったく表示されません。私はcontent:urlでSVGにリンクする方法で問題があり、回避策がありますか？

CSS：

#about-linked{ 
     content:url('./info.svg'); 
     position: absolute; 
     background-color: rgba(24, 24, 24, 0.0); 
     z-index: 10; 
     border-radius: 5px; 
     bottom: 1%; 
     left: 1%; 
     height: 35px; 
     width: 35px; 
     opacity: 0.7; 
     display: none 
    } 

    #about-linked:hover{ 
     cursor: pointer; 
     opacity: 0.9; 
    } 

#changeLayer{ 
    content:url(https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-1/16/5049-512.png); 
    position: absolute; 
    background-color: rgba(24, 24, 24, 0.0); 
    z-index: 3; 
    border-radius: 5px; 
    top: 10%; 
    left: 26%; 
    height: 35px; 
    width: 35px; 
    opacity: 0.7; 
} 

HTML：

<div id='map'> 
    <div id='program_title'> 
     <span id="myspan">TITLE</span> 
    </div> 

    <div id ='about-linked'></div> 
    </div> 

<div id='changeLayer'></div> 

注：background-imageにcontentに変更すると、アイコンは対照的に生成し、望ましくないパターン：たとえば（Chromeの）content:と、私が手：

はなく、background-image:で私が手：

Answer 1

contentのみ::beforeと::after擬似要素で動作します。それ以外のブラウザでも対応可能ですが、それはagainst official documentationです。

良いニュースは、あなたが作る必要がある唯一の変更があるということです： `＃のchangeLayer`アイコンで

#changeLayer::before{ 
    ...