B2 Pro 主题图标优化

现在B2主题UI优化了许多细节,但还是有些细节春哥没来得及优化,比如图标,现在图标看起来没有整体性。所以今天就分享一下我自己的使用的一套图标。这套图标没有全部替换春哥的图标库,有些图标春哥用的非常好,所以我就没有修改。该图标春哥可能会引用(也可能不会)~

现在废话不多说,下面是教程:

所有的修改都是在子主题上面修改!

1、添加iconfont图标库的链接

打开子主题文件中的 b2child/style.css,在style.css中添加以下代码

@import "//at.alicdn.com/t/font_2564532_w2cg3n5fusq.css";

注意:这行代码必须放在所有代码的最上面,也就是说把它放在“下面是您自己DIY的css样式代码”这行注释代码的下面就行。

这是我的iconfont项目链接,大家可以使用,项目里面图标修改项目链接也会修改,所以上面的链接随时会修改,修改链接我会在更新记录里面说明。如果大家想要使用自己的链接或者添加修改一些图标,可以下载我的这套图标,然后上传到自己iconfont项目中去。下面是下载链接:

2、优化css样式

这是网站图标优化样式,修改了一下图标看着比较别扭的css样式。

.bar-item i{
        font-weight: 400;
    }
    .post-content-footer button i, .post-content-footer .content-footer-zan-cai i{
        font-size: 25px;
        color: #494B4D; /*修改颜色*/
    }
    .change-theme button i{
        font-size: 24px;
    }
    i.b2-vrenzhengguanli{
        font-size: 14px;
        text-align: center;
    }
    .w-a-info p i.b2-vrenzhengguanli{
        font-size: 20px;
    }
    .login-eye{
        color: #515A6E;
    }
    .login-eye i{
        font-size: 20px;
        line-height: 35px;
    }
    .post-list-meta li span i{
        font-size: 14px;
        margin-right: 2px;
    }
    .post-meta li span i{
        font-size: 14px;
        margin-right: 2px;
    }
        /*优化积分图标相关联的其他模块*/
        .user-mission-info-right span i{
            margin-right: 2px;
        }
        .user-mission-info-right span, .user-mission-info-right{
            font-size: 14px;
        }
        /*文章内页喜欢图标优化*/
        .post-content-footer .content-footer-zan-cai span{
            margin-right: 0;
            width: 48px;
            height: 48px;
            padding: 0;
            text-align: center;
            display: block;
            border-radius: 100%;
            box-shadow: 0 4px 16px 0 rgb(13 39 91 / 6%);
            background: #fff;
        }
        .content-footer-zan-cai span i{
            line-height: 48px;
        }
        .content-footer-poster .favorite-button.sc i{
            color: #FF9900;
        }
        .content-footer-zan-cai span b{
            display: block;
            color: #494B4D;
            margin-top: 6px;
        }
        .content-footer-zan-cai span.picked i{
            color: #FF3355 !important;
        }
        .post-content-footer .content-footer-poster button{
            margin-bottom: 18px;
        }
        .post-content-footer .content-footer-zan-cai{
            margin-top: 0;
        }
        /*我的、个人中心页面图标优化*/
        .user-sidebar-info .b2-light{   /*去掉了个人中心左侧导航图标下面的圆圈*/
            background: #fff;
        }
        .user-sidebar-info p i{
            color: #494B4D !important;
        }
        .user-sidebar-info.active p i{
            color: #0066FF !important;
        }

以上是我的修改样式,具体请根据自己网站样式二次修改。

至此教程结束,感谢阅读。如果对本教程有疑问或建议请在下面留言~

更新记录

=====2021年05月26日=====
添加了了小黑屋icon
=====2021年05月24日=====
优化B2主题整站图标

给TA买糖
共{{data.count}}人
人已赞赏
列表图文章测试未分类瀑布图网格图

这些Behance顶尖大神的作品,是我的每日必看这些Behance顶尖大神的作品,是我的每日必看!

2021-3-4 12:09:45

B2主题

B2 Pro主题字体文字小优化

2021-5-27 13:43:21

2 条回复 A文章作者 M管理员
  1. ammu

    非常赞,希望也能把分类文本列表样式美化下😁

    • 测试员

      其实你可以设置每行的数量,设置成一行2个或者3个

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索