Forum List Icons

[Pixeldust]

Hi Russ,

I'm trying to modify the forum list icons in Bolt v2 with a duel column layout. I've been using your tutorial for 2.2 and am almost there. The "regular" forum icons work correctly, but all the article forum icons show an extra page icon directly below the custom icon. It looks like this:

I'm also interested in placing a circle behind the icon as shown in the tutorial example, but I can't seem to figure this part out.

Do you have any suggestions to make this work correctly? Here is the code I'm using. As mentioned above, only the two article forums are showing the double icons.

[CODE lang="css" highlight="1,5"] .p-body .node.node--id151 .node-icon i:before {.m-faContent(@fa-var-book);} /* article forum */
.p-body .node.node--id104 .node-icon i:before {.m-faContent(@fa-var-comments-alt);}
.p-body .node.node--id140 .node-icon i:before {.m-faContent(@fa-var-info-circle);}
.p-body .node.node--id131 .node-icon i:before {.m-faContent(@fa-var-map-marker-question);}
.p-body .node.node--id111 .node-icon i:before {.m-faContent(@fa-var-users);} /* article forum */[/CODE]

 

[Russ]

This CSS appears to work for me:

.node .node-icon i
{
    background: #1d2731;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}
.p-body .node.node--id3 .node-icon i:before {.m-faContent(@fa-var-book);}  /* article forum */
.p-body .node.node--id2 .node-icon i:before {.m-faContent(@fa-var-comments-alt);}
.p-body .node.node--id5 .node-icon i:before {.m-faContent(@fa-var-info-circle);}
.p-body .node.node--id4 .node-icon i:before {.m-faContent(@fa-var-map-marker-question);}
.p-body .node.node--id111 .node-icon i:before {.m-faContent(@fa-var-users);}  /* article forum */

There are no double icons showing when using just this CSS. Do you have any other edits related to the icons?

The docs are for 2.2 series technically, 2.3 doc center is launching soon (hopefully this week)

 

[Pixeldust]

Thank you, Russ. This did work for the node background disks. I appreciate your help!

There are no double icons showing when using just this CSS. Do you have any other edits related to the icons?

No, which is the strange part. This was a brand new style installed for 2.3. Either way, I was able to target and hide the extra icons with CSS, so all is well.