- XF 兼容性
- 2.2.x
- 2.3.x
- 摘要
- Customize your Resource Manager icon with style using extra.less. Change the bland default to vibrant colors and a custom Font Awesome logo. Easy steps included in this guide.
Change default Resource Manager icon
_____________________________________________
I find the original icon a bit "bland", here's how to customize it 😉
_____________________________________________
I find the original icon a bit "bland", here's how to customize it 😉
- In extra.less template, add this:
CSS：
.avatar.avatar--resourceIconDefault {
color: #9ac4e3 !important;
background: #eff7fd !important;
border: 1px solid #b7dbf5;
}
.avatar.avatar--resourceIconDefault > span:before {
content: "\e003";
}- We decrypt the code:
- color: #68abdb !important; -> The color of the logo (FA)
- background: #eff7fd !important; -> The background color
- border: 1px solid #b7dbf5; -> The border color
- content: "\e003"; -> The Font Awesome logo
- The "Font Awresome" icons can be found here:
- https://fontawesome.com/
![[cXF] Change default FA node icon](/data/resource_icons/19/19738.jpg?1720149334){kind=icon}
![[cXF] Coloured Node Icons](/data/resource_icons/19/19740.jpg?1720149334){kind=icon}
![[cXF] Icons in sidenav on Account page](/data/resource_icons/19/19736.jpg?1720149334){kind=icon}