Customizing Idea Exchange Icons using CSS

We have an Idea Exchange we use to publish the Product Roadmap for our application that's been a big hit! I've been trying to customize the icons that exist for each status and have been running into some problems.

Here's what the Exchange looks like now:

These icons are great, but we'd love to customize them a little bit more. Right now the icons are controlled by

.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:before {
content: "\f0eb";
}

I tried swapping those out doing something like this instead and it sort or worked:

.IdeaPage .lia-status:nth-child(1):before, .IdeaExchangePage .lia-status:nth-child(1):before {
content: url("new-icon-1");
}
.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:nth-child(2):before {
content: url("new-icon-2");
}
.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:nth-child(3):before {
content: url("new-icon-3");
}
.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:nth-child(4):before {
content: url("new-icon-4");
}
.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:nth-child(5):before {
content: url("new-icon-5");
}

.IdeaPage .lia-status:before, .IdeaExchangePage .lia-status:nth-child(6):before {
content: url("new-icon-6");
}

But it looks like that first child ALSO controls the icons that appear next to each idea. Right now they look like this:

 But after adding the first nth-child they get blown out to something like this:

Does anyone know of an easy CSS trick to change the primary icons on the Idea Exchange without having them show up in the lists and individual Ideas as well? Any suggestions would be much appreciated!

Thanks,

Murph