[Solved] Icon appearing twice and mirrored

[papdronning]

Can anyone help me figure out what in the css is making the shopping cart icon at the top right appear twice – once facing right and once facing left?

http://marensblog.dk/blog/

[Paulie_D]

You have two settings for it and they are both applying.

.icon-shopping-cart {
background-position: -360px -120px;
}

and

[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;

[papdronning]

Do I just remove one of them?

[Paulie_D]

It’s odd, they should be independent but complementary but turning off certain properties does seem to fix it.

There must be something else going on.

I’m wondering if the HTML structure is right.

[Paulie_D]

Aha….you have two icon set-ups.

Bootstrap & Glyphicons
and
Font-Awesome

Bootstrap is doing the black one while FontAwesome is doing this

.icon-shopping-cart:before {
content: "\f07a";  <---the blue one
    }

You’ll just have to pick one or the other.

[papdronning]

How do I do that? (sorry …)

[Paulie_D]

Well you’ll have to stop using one of them and remove that section from your CSS stylesheet(s).

[papdronning]

It was the Visual Composer plug-in that was using the bootstrap.css. Disabled that and everything looks sharp!

Thanks :-)

[Author]

Posts