Hi Ivan,
'm using an icon font and have allocated an icon to a node. When the node is in the More menu any child nodes also display the CSS. If the same main node is accessed when NOT in the more menu the icon doesn't show on the child nodes.
I'm trying to use some CSS to get the icon to only display on the parent node but am having no luck yet. Any pointers?
Regards
Jon
5 Answers, 1 is accepted
0
Hello Jon,
We can suggest adding the icons by using the CssClass property and setting two custom classes to the node you want to set an icon to. The first one could be "iconNode" which you can set to all nodes that are going to have icons and the second one could specify the icon and will be different for every icon used:
This way of setting the icons works correctly at our end and they are not propagated to the node's children when the node is collapsed under the sandwich button.
Regards,
Ivan Danchev
Telerik
We can suggest adding the icons by using the CssClass property and setting two custom classes to the node you want to set an icon to. The first one could be "iconNode" which you can set to all nodes that are going to have icons and the second one could specify the icon and will be different for every icon used:
<
telerik:NavigationNode
Text
=
"Guitars & Basses"
CssClass
=
"iconNode iconCar"
>
.iconNode > .rnvRootLink:before {
font
:
normal
normal
normal
14px
/
1
FontAwesome;
display
: inline-
block
;
margin-right
:
5px
;
}
.iconCar > .rnvRootLink:before {
content
:
"\f1b9"
;
}
This way of setting the icons works correctly at our end and they are not propagated to the node's children when the node is collapsed under the sandwich button.
Regards,
Ivan Danchev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Jon
Top achievements
Rank 1
answered on 02 Feb 2016, 01:56 PM
Hi Ivan,
Well that kind of works. Initially it seemed OK but it forces the icon to only be on the top level. If I need an icon on a second level or non root link it fails.
Is there a way to prevent the cascade? kind of like blocking an inherit in reverse
Regards
Jon
0
Hello Jon,
Setting the icons to the second and third levels of nodes can be done with a similar CSS rule:
Here's how the Navigation would look like with the "iconCar" class set to the "Accessories" item and the "iconHeart" class set to two of the items of the next levels: video. Again no icon is replicated in siblings or child nodes and only the three that have the custom classes set display the corresponding icons.
Regards,
Ivan Danchev
Telerik
Setting the icons to the second and third levels of nodes can be done with a similar CSS rule:
.iconHeart > .rnvLink:before {
font
:
normal
normal
normal
14px
/
1
FontAwesome;
display
: inline-
block
;
margin-right
:
5px
;
content
:
"\f004"
;
}
Here's how the Navigation would look like with the "iconCar" class set to the "Accessories" item and the "iconHeart" class set to two of the items of the next levels: video. Again no icon is replicated in siblings or child nodes and only the three that have the custom classes set display the corresponding icons.
Regards,
Ivan Danchev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Jon
Top achievements
Rank 1
answered on 08 Feb 2016, 09:12 AM
Many thanks Ivan, my CSS structure is a little different however it was close enough to see that I needed to use the > selector. Works perfectly now :)
0
Hello Jon,
I am glad the suggested selector helped in solving the issue and the icons are applied to specific nodes as expected.
Regards,
Ivan Danchev
Telerik
I am glad the suggested selector helped in solving the issue and the icons are applied to specific nodes as expected.
Regards,
Ivan Danchev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items