CODEWITHSUNDEEP
htmlcssiconscss-transformsicomoon
user1049944
user1049944

Reputation:

CSS transform + Icomoon

I have the following button

<a href="<?php echo get_permalink(18); ?>" class="btn btn-primary btn-primary btn-back">
    <span class="icon">
        <span class="icomoon icon-arrow-01"></span>
    </span>
    News / Tips
</a>

...and I'm trying to flip the icon horizontally like so:

.btn-back .icomoon::before {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

I've also added display: inline-block; to the [class^="icon-"], [class*=" icon-"] as per what I read on a different post on here.

But when I view in my browser, the icon isn't flipped. I've also tried transforming the parent .icon container instead, but with no luck

Upvotes: 0

Views: 18

Answers (0)

Related Questions