css - 堆叠字形以获得更细的线条

Question

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

但我想点赞

我有这个 http://www.bootply.com/74yaqOTNKM 的 bootply

Answer 1

你可以用一个基本的 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