Hi all
I am making good progress with bootstrapping MyBB. I am busy with the usercp nav, and have added font awesome icons to all links except the
usercp_nav_messenger_folder template, which uses variables and sprite images.
<div><a href="private.php?fid={$folder_id}" class="usercp_nav_item {$class}">{$folder_name}</a></div>
How can I add the icons for the individual folder IDs?
Thanks.
Give this a try:
.usercp_nav_item {
background-image: unset;
}
.usercp_nav_sub_pmfolder:before {
font-family: FontAwesome;
content: "\YourIcon";
}
This will remove the background and add the pseudo-element (before).
(2015-10-13, 09:52 PM)SentoWeb Wrote: [ -> ]Give this a try:
.usercp_nav_item {
background-image: unset;
}
.usercp_nav_sub_pmfolder:before {
font-family: FontAwesome;
content: "\YourIcon";
}
This will remove the background and add the pseudo-element (before).
Thank you, that works. How do I set icons for individual IDs? eg, the fid=4
Use the :nth-child(x) selector. Since these navigations items have a parent div for some reason you will have to use it on every div in the usercppms_e container. fid=4 will be in the 5th div.
#usercppms_e div:nth-child(5) .usercp_nav_sub_pmfolder{
font-family: FontAwesome;
content: "\YourIcon";
}
(2015-10-13, 10:43 PM)SentoWeb Wrote: [ -> ]Use the :nth-child(x) selector. Since these navigations items have a parent div for some reason you will have to use it on every div in the usercppms_e container. fid=4 will be in the 5th div.
#usercppms_e div:nth-child(5) .usercp_nav_sub_pmfolder{
font-family: FontAwesome;
content: "\YourIcon";
}
Thanks for the help.
I wanted the icon before the <a> link so that i don't get the blue of a bootstrap link, so I made the template code:
<div><span class="usercp_nav_item_{$folder_id}"></span> <a href="private.php?fid={$folder_id}">{$folder_name}</a></div>
and the CSS: which seems to work OK.
.usercp_nav_item {
background-image: unset;
}
.usercp_nav_item_1:before {
font-family: FontAwesome;
content: "\f01c";
}
.usercp_nav_item_2:before {
font-family: FontAwesome;
content: "\f1d8";
padding-left: 20px;
background-position: 0 -40px;
}
.usercp_nav_item_3:before {
font-family: FontAwesome;
content: "\f0ea";
padding-left: 20px;
background-position: 0 -40px;
}
.usercp_nav_item_4:before {
font-family: FontAwesome;
content: "\f1f8";
padding-left: 20px;
background-position: 0 -40px;
}