CODEWITHSUNDEEP
cssfont-awesome
John N
John N

Reputation: 854

Redefine Awesome stacked icons as one icon with CSS rules only

FontAwesome 3.2.1

I want to use Awesome stacked icons (font icons that placed one upon the other) using only CSS. Is it possible to define concrete icons some special CSS rule ?

Now stacked icons are used so, so icon-check-empty will be shown over icon-twitter.

<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>

I want to define CSS rules (myclass) so that I can use it in one span instead.

my.css
  icon-twitter-on-icon-check-empty {  } 
  .....


my.html
  <span class="icon-twitter-on-icon-check-empty" />

Upvotes: 3

Views: 411

Answers (2)

cholisky
cholisky

Reputation: 175

Through CSS only, this has the Face Time icon in the before of the CSS and the pause on top in red in the after. I'm using this code to override a web theme, which is why there is a background-image:none.

So in your css:

.videoIcon {
    background-image:none!important;
    position:relative;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size:small;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
    .videoIcon:before {
    content: "\f03d";
    vertical-align: middle;
    position: absolute;
    left: 0;
}
    .videoIcon:after{
    content:"\f04c";
    position: absolute;
    right: 0;
    bottom:0;
    color:red;
    font-size:smaller;
}

Upvotes: 0

Jimmy Breck-McKye
Jimmy Breck-McKye

Reputation: 3034

If I understand you correctly, certainly.

You should create a generic class for establishing the spacing for your icons and the background image to be added, then a chained or complementary class for determining the sprite's background position.

Edit: I didn't realize you wanted to actually display several icons on top of one another. That's a very different matter. You would want to use positioning to do that.

Upvotes: 1

Related Questions