At CSS level - is it possible instigate display:none on the BG-image of the sub-category icon but not affect the larger primary larger Categories icon on the main categories level page?
On quick look it appears the bg-img url is in the span tag - is it possible to have it over-ridden by placing display:none in the primary controlling class and if so what is exactly is that class for the sub-category icon exactly?
Ok ok - this seems to work so far for me.
.fa-lg[style*="url(/assets/uploads/category/category-1.png)"] {
background-image: none !important;
}
I'd appreciate if someone could guide me here - I'm not having success controlling the look of the a category sub-category icon on the Categories page - it's inheriting the changes I've made to the following classes below that I've used these to control the icon on the categories page to my liking:
.categories>li .content .icon, .category>ul>li .content
However those also affect the sub-category icon, looking at the code this is what I'm now trying to control or I think I need to control but I think it conflict with the top level Category icon:
<div class="icon pull-left" style="background-color: #86C1B9; color: #333;">.
This is where I've found it:
<span class="category-children-item pull-left">**<div class="icon pull-left" style="background-color: #86C1B9; color: #333;">**<i class="fa fa-fw fa-comments"></i></div><a href="/category/5/sub-category-test"><small>Sub-Category-Test</small></a></span>
I'm trying to change the shape and size of the sub-category icon, right now it's the same size as it's top level Category.
Also of course there could be a syntax error or conflict in my CSS hacks also causing it and I'll play more and look closer also.
Well this seemed to work for me -
.categories>li .category-children .icon, .category>ul>li .category-children .icon
Now on to control the layout of the sub categories !!!!! 
