堆叠glyphicons用于更细的线

Question

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

但我想要这个

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

有兴趣

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

Answer 2

我删除了glyphicon-remove并添加了图片..

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

CSS

.remove
{
    content:url(http://www.clker.com/cliparts/b/U/E/8/C/s/wrong-x-hi.png);
  width: 20px;
    height: 20px;
  position: absolute;
  bottom: 0px;
  right: 3px;
}

<强> DEMO

Answer 3

另一种方式，正如@isherwood所说：

http://www.bootply.com/kwoCqPJkcE

HTML

<span class="icon-stack">
    <i class="glyphicon glyphicon-phone-alt  icon-stack-base"></i>
    <i class="i-want-a-thick-remove-icon"></i>
</span>

CSS

.i-want-a-thick-remove-icon {
    position: relative;
}

.i-want-a-thick-remove-icon:before, .i-want-a-thick-remove-icon:after {
    position: absolute;
    background: red;
    height: 100%;
    width: 2px;
    content: "";
}

.i-want-a-thick-remove-icon:before {
    height: 27px;
    left: 14px;
    top: 15px;
    transform: rotate(-45deg);
}

.i-want-a-thick-remove-icon:after {
    height: 27px;
    right: -15px;
    top: 15px;
    transform: rotate(45deg);
}   

我把绝对措施，但你可以适应它们。

我希望它有所帮助。