Tutorial/教程 修改 Solfège 主题下的积分图标

[oksgo]

原图标：

修改后的图标:

登录后台：

搜索模板：extra.less

添加以下代码：

.p-navgroup-link {
    &.p-navgroup-link--mjc-credits i:after {
        display: block; /* 使用块级元素 */
        content: ""; /* 不需要 Unicode 了 */
        width: 1.28571429em; /* 图标宽度 */
        height: 1em; /* 图标高度 */
        mask: url('/styles/fa/duotone/credit-card.svg?v=5.15.3') no-repeat center; /* 使用 cc-amazon-pay 图标的 SVG 路径 */
        -webkit-mask: url('/styles/fa/duotone/credit-card.svg?v=5.15.3') no-repeat center; /* 兼容性处理 */
        background-color: currentColor; /* 图标颜色将根据文本颜色变化 */
        margin-bottom: 5px; /* 图标和文本之间的间距 */
    }
}

保存退出，刷新前台页面，完美！

上图所示与主题其它图标匹配，如本站积分图标，鼠标滑动将会跟随本主题色调显示颜色！

 

Tutorial/教程  [cXF] Sticky Postbit

Tutorial/教程  滚动合作伙伴小部件