stack glyphicons for thinner line

Question

I have created a stack of glyphicons with glyphicon-phone-alt and glyphicon-remove. Looks good but I want make glyphicon-remove thinner line. Now it is showing very thick line so telephone cannot see.

enter image description here

But I want to like this enter image description here

I have bootply for this http://www.bootply.com/74yaqOTNKM

Glyphicons are font characters. You can't change their shapes. Consider using CSS transforms to add rotated pseudo-elements. — isherwood, May 06 '15 at 14:24

isherwood · Answer 1 · 2015-05-06T14:48:53.907

1

You can do fairly well with a basic 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

Here it is all 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

edited May 06 '15 at 14:48

answered May 06 '15 at 14:39

isherwood

58,414
16
114
157

Can you make Demo 2 in smaller size image? – James123 May 06 '15 at 15:00
Nope. :-) The CSS is all there in the demo for you to play with. Change the font size of the glyphicon element to resize it. – isherwood May 06 '15 at 15:38
I am able re-size the phone but not the cross mark, – James123 May 06 '15 at 15:51
Just change the widths and heights of the :before and :after elements. You may also need to adjust their positions. – isherwood May 06 '15 at 15:56

score 0 · Answer 2 · answered May 06 '15 at 14:32

0

I have removed glyphicon-remove and added image..

  <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

answered May 06 '15 at 14:32

sheshadri

1,207
9
21

You can create your own glyphicons...read this post http://stackoverflow.com/questions/18401035/twitter-bootstrap-3-create-a-custom-glyphicon-and-add-to-glyphicon-font – sheshadri May 06 '15 at 14:47

score 0 · Answer 3 · answered May 06 '15 at 14:46

Another way, as @isherwood suggested:

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);
}

I put absolutes measures, but you can adapt them.

I hope it helps.

stack glyphicons for thinner line

3 Answers3