0

I generated a list of custom icons from fontello, and I needed 2 make 2 icons stacked (because I needed the two in different colours).

Originally, I had it wrapped in a container that's in relative position, with the two icons as their own object in absolute position -- that works, however, when I sent it to the developers, they request it be in one object, because otherwise they have to change a list of angular code, blah blah blah.

So I was thinking of using the :before and :after. For example: 

<i class ="icon-one icon-two">

.icon-one:before {
content: '\787';
}
.icon-two:after {
content: '\666';
}

However, the same code I put in the before would work, but when I change the pseudo class to :after, it's broken and left with a big rectangle on the page. I can't figure out why that is.

Can anyone give me some hints?

leppie
  • 115,091
  • 17
  • 196
  • 297
CleverNode
  • 307
  • 4
  • 12
  • 1
    You should add a bigger code sample, or live link for the issue. Based on a blind guess, you probably have a `font-family` set to your icon-font only on `:before` selector. Also, test with the same working icon, to exclude the possibility of wrong icon character code. – Matija Mrkaic Aug 03 '15 at 11:34
  • You're right. That was the problem. Someone from the fontello user group helped me solved it. – CleverNode Aug 06 '15 at 14:31

0 Answers0