Question

如果图像不可用，我正在寻找一个显示Font Awesome图标的简单解决方案。我使用以下标记：

<div class="notAvailableIcon" style="background-image:NotAvailable.jpg">
</div>

CSS：

.notAvailableIcon:before {
   font-family: FontAwesome;
   content: "\f000";
 }

如果图像不可用，这可以正常工作。但是，如果图像可用，图标仍然可见并位于图像前方。是否有任何CSS解决方案隐藏图标如果设置了背景图像，或者我可以堆叠背景图像，以便它在图像后面（如果可用）？

Answer 1

这可能会或可能不符合您的需求，但一种解决方案是定位伪元素absolute并给它一个负z-index值：

Example Here （在CSS面板中切换background）

.notAvailableIcon { position: relative; min-height: 1.2em; }

.notAvailableIcon:before {
    content: "\f000";
    font-family: FontAwesome;
    position: absolute; z-index: -1;
 }

侧注：正弦假元素从正常流中移除，最好设置容器的最小高度，等于一行文本的高度：{{1} }

当背景图像不可用时，字体真棒图标

1 个答案: