AnsweredAssumed Answered

CSS canvas icon size scope is not set

Question asked by Edward Dormady on Jan 19, 2017
Latest reply on Mar 22, 2017 by Edward Dormady

Hello,

 

I have added some custom menu icons in my global nav, but I'm seeing the size (30 pt) propagated to other pages which is not desirable. Specifically I see the validate links in content on course settings icon-link is the same size as my menu item icon.

 

I've tried and failed to set the scope of the css to only affect the global nav menu, but I'm not sure how to do so.

 

This is my current prod CSS. I tried adding i. and also menu and #menu thinking this might work to no avail. Any idea how to restrict the resizing?

 

#custom_nav .menu-item-icon-container {
    position: relative;
    left: -4px;
}
#custom_nav .menu-item__text {
    margin-top: 15px;
}
.icon-resources {
  position: relative;
  left: -2px;
}
.icon-resources:before {
  content: "\f13c";
}
.icon-resources[class*=icon-]:before, .icon-resources[class^=icon-]:before {
  font-size: 30px;
/*Set Hover Colors on Resource Link*/
a#global_nav_resources_link:hover {
    color: white;
}
/*Icon for USF Resources link*/
menu.icon-link {
  position: relative;
  left: -2px;
}
menu.icon-link[class*=icon-]:before, .icon-link[class^=icon-]:before {
  font-size: 30px;
}

Outcomes