イメージを読み込めない場合、アイコンを隠すこと

私が取り組んでいるウェブサイトには、アイコンが付いたいくつかのオプションが含まれているメニューバーがあります。これらのアイコンは純粋に装飾的なものであり、結果として代替テキストは必要ありません。イメージを読み込めない場合、アイコンを隠すこと

残念なことに、画像にはスタイルがあります。これは、メニューバーで正しく調整されるマージンで、高さは30pxです。

これは、ボタン自体のコード（アイコンが32x32pxが、16x16pxまでサイズ変更される）である。

<a class="button" href="#"> 
    <img src="images/crosshair.png" alt=""> 
    <span>Track and Trace</span> 
</a>

CSS：

.button { 
    display: block; 
    padding: 3px 8px; 
    background: #343434; 
    text-decoration: none; 
    color: #ececec;      
    font-size: 0; // used by inline-block 
} 
.button img { 
    display: inline-block; 
    vertical-align: top; // needed to align the image properly; I couldn't find a better way. 
    height: 16px; 
    border: 0; 
    font-size: 16px; 
    margin: 4px 6px 4px 0; 
} 
.button span { 
    display: inline-block; 
    vertical-align: top; 
    font-size: 16px; 
} 
.button:hover { 
    background: #2E2E2E; 
}

画像がロードされませんマージンのためにスペースを残すという効果があります。

他の人がアイコンを消したいときに何をするのですか？完全にをロードできない場合はどうすればいいですか？

出典

2016-03-20 Forest