css - 堆叠字形图标以使线条更细

我用glyphicons和glyphicon-phone-alt创建了glyphicon-remove堆栈。看起来不错，但我想使glyphicon-remove的线条更细。现在它显示的是很粗的线，所以电话看不到。



但是我想要这样

我为此http://www.bootply.com/74yaqOTNKM

最佳答案

使用基本X可以做得很好：

.crisscross {
    font-size: 48px;
    color: red;
    margin-left: -2px;
    margin-left: -4px;
    font-family: cursive;
    position: relative;
    z-index: 1;
}

<span class="icon-stack">
    <i class="glyphicon glyphicon-phone-alt icon-stack-base "></i>
    <span class="crisscross">X</span>
</span>

Demo

这就是CSS-ey：

.crisscross {
    width:40px;
    height:40px;
    position:relative;
    border-radius:6px;
}
.crisscross:before, .crisscross:after{
    content:'';
    position:absolute;
    width: 45px;
    height: 3px;
    border-radius:2px;
    top:16px;
    background: red;
}
.crisscross:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left: -7px;
}
.crisscross:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right: -35px;
}

Demo 2