how to flip glyphicon icon

Is there any way to flip glyphicon. I found Flip an Image css trick, but that does not work for glyphicon. Please any suggestions

asked Sep 4 '13 at 9:14

Jamol

1,39263160

Can you show the code that you have tried?

– Nitesh
Sep 4 '13 at 9:18

Refer this link it works stackoverflow.com/questions/18604829/…

– anand
Jan 10 '14 at 15:05

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

– Chris Marisic
Apr 12 '16 at 15:56

add a comment |

Is there any way to flip glyphicon. I found Flip an Image css trick, but that does not work for glyphicon. Please any suggestions

asked Sep 4 '13 at 9:14

Jamol

1,39263160

Can you show the code that you have tried?

– Nitesh
Sep 4 '13 at 9:18

Refer this link it works stackoverflow.com/questions/18604829/…

– anand
Jan 10 '14 at 15:05

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

– Chris Marisic
Apr 12 '16 at 15:56

add a comment |

Is there any way to flip glyphicon. I found Flip an Image css trick, but that does not work for glyphicon. Please any suggestions

asked Sep 4 '13 at 9:14

Jamol

1,39263160

Is there any way to flip glyphicon. I found Flip an Image css trick, but that does not work for glyphicon. Please any suggestions

css icons flip glyphicons

asked Sep 4 '13 at 9:14

Jamol

1,39263160

asked Sep 4 '13 at 9:14

Jamol

1,39263160

asked Sep 4 '13 at 9:14

Jamol

1,39263160

asked Sep 4 '13 at 9:14

Jamol

1,39263160

asked Sep 4 '13 at 9:14

Jamol

1,39263160

Can you show the code that you have tried?

– Nitesh
Sep 4 '13 at 9:18

Refer this link it works stackoverflow.com/questions/18604829/…

– anand
Jan 10 '14 at 15:05

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

– Chris Marisic
Apr 12 '16 at 15:56

add a comment |

Can you show the code that you have tried?

– Nitesh
Sep 4 '13 at 9:18

Refer this link it works stackoverflow.com/questions/18604829/…

– anand
Jan 10 '14 at 15:05

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

– Chris Marisic
Apr 12 '16 at 15:56

Can you show the code that you have tried?

– Nitesh
Sep 4 '13 at 9:18

Refer this link it works stackoverflow.com/questions/18604829/…

– anand
Jan 10 '14 at 15:05

Rotating icons that are use pseudo before/after content stackoverflow.com/questions/9779919/…

– Chris Marisic
Apr 12 '16 at 15:56

add a comment |

2 Answers
2

active

oldest

votes

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {

    transform: scaleX(-1);

    -moz-transform: scaleX(-1);

    -webkit-transform: scaleX(-1);

    -ms-transform: scaleX(-1);

}

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

2

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

2

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

add a comment |

Using glyphicons managed to make this work like so:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

see JSFiddle here

answered Jan 28 '15 at 15:20

Jax

1,58421526

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f18609819%2fhow-to-flip-glyphicon-icon%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {

    transform: scaleX(-1);

    -moz-transform: scaleX(-1);

    -webkit-transform: scaleX(-1);

    -ms-transform: scaleX(-1);

}

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

2

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

2

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

add a comment |

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {

    transform: scaleX(-1);

    -moz-transform: scaleX(-1);

    -webkit-transform: scaleX(-1);

    -ms-transform: scaleX(-1);

}

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

2

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

2

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

add a comment |

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {

    transform: scaleX(-1);

    -moz-transform: scaleX(-1);

    -webkit-transform: scaleX(-1);

    -ms-transform: scaleX(-1);

}

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {

    transform: scaleX(-1);

    -moz-transform: scaleX(-1);

    -webkit-transform: scaleX(-1);

    -ms-transform: scaleX(-1);

}

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

edited Jan 24 '17 at 18:16

cale_b

19.7k44782

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

answered Sep 4 '13 at 9:16

Falguni Panchal

7,48421928

2

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

2

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

add a comment |

2

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

2

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

1

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

This didn`t work. I am not using fontawesome. I am using glyphicons

– Jamol
Sep 4 '13 at 10:13

This worked for me and I'm using glyphicons (via twitter bootstrap) too

– corinnaerin
Jul 14 '15 at 20:19

You should keep in mind to put the real css property last in the list since this could in some cases cause a render differance: css-tricks.com/ordering-css3-properties

– Berty
Feb 9 '16 at 10:41

@jCloud to use this solution with Bootstrap Glyphicons you should do like this: <a href="#" class="btn"></a>. Sorry for coding in the comments, my edits were rejected.

– Leopoldo Sanczyk
Dec 29 '16 at 0:59

I tried to apply this to iron-icon (which is icon components for Polymer) and it didn't work!! @falguni-panchal do you have an idea ? inside the component there is an svg icon btw

– getName
yesterday

add a comment |

Using glyphicons managed to make this work like so:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

see JSFiddle here

answered Jan 28 '15 at 15:20

Jax

1,58421526

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

add a comment |

Using glyphicons managed to make this work like so:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

see JSFiddle here

answered Jan 28 '15 at 15:20

Jax

1,58421526

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

add a comment |

Using glyphicons managed to make this work like so:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

see JSFiddle here

answered Jan 28 '15 at 15:20

Jax

1,58421526

Using glyphicons managed to make this work like so:

HTML

<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>

CSS

#my-glyphicon {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";

}

see JSFiddle here

answered Jan 28 '15 at 15:20

Jax

1,58421526

answered Jan 28 '15 at 15:20

Jax

1,58421526

answered Jan 28 '15 at 15:20

Jax

1,58421526

answered Jan 28 '15 at 15:20

Jax

1,58421526

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

add a comment |

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

i wish it has more elegant solution via an embedded class. so bootstrap does not have such class to rotate right?

– MonsterMMORPG
Jun 28 '16 at 13:23

@MonsterMMORPG not that I'm aware of.

– Jax
Jun 28 '16 at 18:27

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky