Hello. I would like to add different Font Awesome Icon(s) to each CategoryStrip, after the Categories Title and the same Icon as a small one before the Title instead of the Block the Style is normally using
As you can see the Font Awesome GamePad Icon is added to the Right with a opacity.
The next step now is to have the same Icon 2 more times to the left, each a bit smaller like O O O
The 0 stays for the GamePad Icon
To get the FA Icon displayed I needed to delete ".nodeList .categoryStrip .nodeTitle:before" within the Template "xb_style.css" out of this Code Part
otherwise i could not get the Icon displayed.
This is the Code i use to display the FA Icon.
For global i use this so i don´t need to add it to every Category Node Number (smaller the code a bit)
And thats the Code i use for every CategoryStrip, since rotation, position is always a little different and because every category uses a different icon too
The X in .node_X is for each Category Number.
In Short:
Each Category Strip has its own FA Icon. A small one before the Title (replacing with the Block) and the same Icon 3 Times, first bigger, then smaller to the left.
Hope that someone can help me with that. Thanks
As you can see the Font Awesome GamePad Icon is added to the Right with a opacity.
The next step now is to have the same Icon 2 more times to the left, each a bit smaller like O O O
The 0 stays for the GamePad Icon
To get the FA Icon displayed I needed to delete ".nodeList .categoryStrip .nodeTitle:before" within the Template "xb_style.css" out of this Code Part
Code:
.sidebar h3:before, .nodeList .categoryStrip .nodeTitle:before, .textWithCount span.text:before, html .container .xengallerySideBar .section h3:before,
.resourceListSidebar .secondaryContent h3:first-child:before {
otherwise i could not get the Icon displayed.
This is the Code i use to display the FA Icon.
For global i use this so i don´t need to add it to every Category Node Number (smaller the code a bit)
Code:
.nodeList .categoryStrip .nodeTitle::before {
position: absolute;
opacity: 0.05;
color: rgb(86, 50, 130)
}
And thats the Code i use for every CategoryStrip, since rotation, position is always a little different and because every category uses a different icon too
Code:
.nodeList .node_X .categoryStrip .nodeTitle::before {
font-family: FontAwesome;
content: "\f11b";
right: 50px;
top: -35px;
font-size: 80px;
transform: rotate(15deg);
}
The X in .node_X is for each Category Number.
In Short:
Each Category Strip has its own FA Icon. A small one before the Title (replacing with the Block) and the same Icon 3 Times, first bigger, then smaller to the left.
Hope that someone can help me with that. Thanks