user4676340
user4676340

Reputation:

join icons in a font with CSS

EDIT : For confidentiality reasons I am forced to delete this topic.

I have found the answer : in the comment below, delete the position: absolutein the :after element. This does the trick.

Thank you all for your help !

Upvotes: 1

Views: 98

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Do not give position: absolute for all the icons. Instead specify it specifically to that element.

<div class="joined-icons">
  <i class="icon-test xs"></i>
</div>

And in you SCSS:

.joined-icons {
  .icon-test {
    display: block;
    position: relative;
    &:before {
      content: '\F018';
      position: absolute;
    }
    &:after {
      content: '\F019';
      position: absolute;
    }
  }
}

The above code only affect all the icons inside div.joined-icons. So you will be alright.

Upvotes: 1

Related Questions