如何修改fa fa-cube图标背景为非透明？适配扑克牌背景

我想修改fa fa-cube图标，让它背景不再透明，放在扑克牌样式的背景上，但当前显示效果不好。理想状态是给图标加白色或浅蓝色填充。作为前端新手，我考虑过在图标后方叠加另一个立方体，但不知道具体怎么实现。另外我试过加aria-hidden="true"属性，但不清楚它的作用。

相关代码如下：

CSS代码 #

.deck {
    border: 2px dashed #080808;
    width: 160px;
    height: 120px;
    
}

.deck .card {
    justify-content: space-around;
    font-size: 50px;
    color: #0023F5;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
    transform-origin: center;
    border-radius: 15px;
    border: 5px solid black;
    height: 116px;
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image: linear-gradient(135deg, #F74141 25%, transparent 25%), linear-gradient(225deg, #F74141 25%, transparent 25%), linear-gradient(45deg, #F74141 25%, transparent 25%), linear-gradient(315deg, #F74141 25%, #e5e5f7 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 10px 10px;
    background-repeat: repeat;
}

HTML代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="deck">
  <div class="card">
    <i class="drawing fa fa-cube"></i>
  </div>
</div>

当前效果：

第一种简单方法：用文字阴影模拟填充 #

Font Awesome图标本质是特殊字体，直接用text-shadow就能给图标加“填充”效果，不用额外加元素。比如给图标套一层白色粗阴影，蓝色图标在复杂背景上就清晰多了：

给.drawing类加这段CSS：

.drawing {
  text-shadow: 
    1px 1px 0 #fff,
    -1px 1px 0 #fff,
    1px -1px 0 #fff,
    -1px -1px 0 #fff;
}

想要浅蓝色填充的话，把#fff换成你要的颜色就行，比如#cceeff。

第二种方法：叠加图标实现真实填充 #

如果想真的用一个立方体图标当背景填充，可以用绝对定位叠加：

1. 先改HTML，多放一个fa-cube元素：

<div class="card">
  <i class="drawing-bg fa fa-cube"></i>
  <i class="drawing fa fa-cube"></i>
</div>

2. 然后加CSS：

.card {
  position: relative; /* 让内部绝对定位的元素以卡片为基准 */
}

.drawing-bg {
  position: absolute;
  color: #fff; /* 填充的颜色 */
  z-index: 1; /* 把背景图标放在底层 */
  transform: scale(1.1); /* 放大一点，刚好覆盖上层图标的镂空部分 */
}

.drawing {
  position: relative;
  z-index: 2; /* 前景图标放在上层 */
  color: #0023F5;
}

调整scale的数值，直到背景图标刚好填满前景的镂空区域就行。

关于aria-hidden="true"的作用 #

这个是给屏幕阅读器用的，告诉读屏软件忽略这个元素。因为Font Awesome图标是用<i>标签做的，本身没有实际语义，不加的话屏幕阅读器可能会读出乱码或者无意义的内容，加了之后能提升页面的无障碍性。如果图标只是装饰用的，建议加上；要是图标有功能（比如按钮上的图标），还要配合aria-label说明这个图标是干嘛的。

内容的提问来源于stack exchange，提问作者mendacium